142 lines
7.9 KiB
HTML
142 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SIG Bansos - Dashboard Admin</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Segoe UI', sans-serif; background: #f0f2f5; }
|
|
#map { height: 75vh; width: 100%; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
|
|
.stat-card { background: white; border-radius: 10px; padding: 15px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; transition: 0.3s; }
|
|
.stat-card:hover { transform: translateY(-3px); }
|
|
.stat-card h3 { font-size: 28px; font-weight: 700; margin: 0; }
|
|
.stat-card p { margin: 0; font-size: 12px; color: #6c757d; }
|
|
.nav-card { background: white; border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; transition: 0.3s; text-decoration: none; color: #333; display: block; }
|
|
.nav-card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
|
|
.nav-card i { font-size: 36px; display: block; margin-bottom: 10px; }
|
|
.leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; overflow: hidden; }
|
|
.leaflet-popup-content { margin: 0 !important; width: 250px; }
|
|
.popup-header { padding: 10px; color: white; font-weight: 600; font-size: 13px; }
|
|
.popup-body { padding: 10px; font-size: 12px; }
|
|
.popup-row { display: flex; justify-content: space-between; margin-bottom: 3px; }
|
|
.popup-label { color: #888; }
|
|
.popup-value { font-weight: 500; }
|
|
.legend { background: white; padding: 8px 12px; border-radius: 8px; font-size: 11px; }
|
|
.legend-item { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; }
|
|
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
const user = JSON.parse(sessionStorage.getItem('user'));
|
|
if (!user || user.role !== 'admin') {
|
|
window.location.href = '/login.html';
|
|
}
|
|
</script>
|
|
|
|
<nav class="navbar navbar-dark bg-dark mb-3">
|
|
<div class="container-fluid">
|
|
<span class="navbar-brand"><i class="fas fa-map-marked-alt"></i> SIG Bantuan Sosial</span>
|
|
<div>
|
|
<span class="badge bg-warning text-dark me-2">Administrator</span>
|
|
<button class="btn btn-danger btn-sm" onclick="logout()"><i class="fas fa-sign-out-alt"></i> Logout</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<div class="stat-card">
|
|
<h3 id="totalOrang" style="color:#17a2b8;">0</h3>
|
|
<p>Orang Berkebutuhan</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stat-card">
|
|
<h3 id="totalIbadah" style="color:#28a745;">0</h3>
|
|
<p>Tempat Ibadah</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<a href="/sig-bansos/ORANG%20BERKEBUTUHAN.html" class="nav-card">
|
|
<i class="fas fa-user-edit" style="color:#17a2b8;"></i>
|
|
Kelola Orang
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<a href="/sig-bansos/RUMAH%20IBADAT.html" class="nav-card">
|
|
<i class="fas fa-place-of-worship" style="color:#28a745;"></i>
|
|
Kelola Ibadah
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="legend mb-2">
|
|
<strong>Legenda:</strong>
|
|
<span class="legend-item"><span class="legend-dot" style="background:#17a2b8;"></span> Orang</span>
|
|
<span class="legend-item"><span class="legend-dot" style="background:#28a745;"></span> Masjid</span>
|
|
<span class="legend-item"><span class="legend-dot" style="background:#dc3545;"></span> Gereja</span>
|
|
<span class="legend-item"><span class="legend-dot" style="background:#ff6f00;"></span> Klenteng</span>
|
|
<span class="legend-item"><span class="legend-dot" style="background:#ff9800;"></span> Vihara</span>
|
|
<span class="legend-item"><span class="legend-dot" style="background:#9c27b0;"></span> Pura</span>
|
|
</div>
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function logout() {
|
|
sessionStorage.removeItem('user');
|
|
window.location.href = '/login.html';
|
|
}
|
|
|
|
const API_ORANG = '/sig-jalan/api_orang.php';
|
|
const API_IBADAH = '/sig-jalan/api_ibadah.php';
|
|
const W = { masjid:'#28a745', gereja:'#dc3545', klenteng:'#ff6f00', vihara:'#ff9800', pura:'#9c27b0' };
|
|
const I = { masjid:'fa-mosque', gereja:'fa-church', klenteng:'fa-torii-gate', vihara:'fa-om', pura:'fa-gopuram' };
|
|
|
|
var map = L.map('map').setView([-0.026330, 109.342519], 13);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);
|
|
|
|
async function load() {
|
|
const ro = await fetch(API_ORANG+'?action=getAll').then(r=>r.json());
|
|
const orang = ro.success ? ro.data : [];
|
|
|
|
let ibadah = [];
|
|
for(const j of ['masjid','gereja','klenteng','vihara','pura']) {
|
|
const ri = await fetch(API_IBADAH+'?type='+j+'&action=getAll').then(r=>r.json());
|
|
if(ri.success) ri.data.forEach(d => { d._jenis=j; ibadah.push(d); });
|
|
}
|
|
|
|
document.getElementById('totalOrang').textContent = orang.length;
|
|
document.getElementById('totalIbadah').textContent = ibadah.length;
|
|
|
|
orang.forEach(o => {
|
|
const m = L.marker([parseFloat(o.latitude), parseFloat(o.longitude)], {
|
|
icon: L.divIcon({html:'<i class="fas fa-user" style="font-size:22px;color:#17a2b8;"></i>',className:'',iconSize:[22,22],iconAnchor:[11,22]})
|
|
}).addTo(map);
|
|
m.bindPopup(`<div><div class="popup-header" style="background:#17a2b8"><i class="fas fa-user"></i> ${o.nama}</div><div class="popup-body"><div class="popup-row"><span class="popup-label">Kebutuhan</span><span class="popup-value">${o.jenis_kebutuhan||'-'}</span></div><div class="popup-row"><span class="popup-label">Alamat</span><span class="popup-value">${o.alamat||'-'}</span></div></div></div>`);
|
|
});
|
|
|
|
ibadah.forEach(d => {
|
|
const m = L.marker([parseFloat(d.latitude), parseFloat(d.longitude)], {
|
|
icon: L.divIcon({html:'<i class="fas '+I[d._jenis]+'" style="font-size:22px;color:'+W[d._jenis]+';"></i>',className:'',iconSize:[22,22],iconAnchor:[11,22]})
|
|
}).addTo(map);
|
|
m.bindPopup(`<div><div class="popup-header" style="background:${W[d._jenis]}"><i class="fas ${I[d._jenis]}"></i> ${d.nama}</div><div class="popup-body"><div class="popup-row"><span class="popup-label">Jenis</span><span class="popup-value">${d._jenis}</span></div><div class="popup-row"><span class="popup-label">Alamat</span><span class="popup-value">${d.alamat||'-'}</span></div></div></div>`);
|
|
});
|
|
}
|
|
|
|
load();
|
|
</script>
|
|
</body>
|
|
</html> |