128 lines
5.3 KiB
PHP
128 lines
5.3 KiB
PHP
<?php
|
|
session_start();
|
|
if (!isset($_SESSION['is_admin']) || $_SESSION['is_admin'] !== true) {
|
|
header('Location: login.php');
|
|
exit;
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Panel Admin — WebGIS Sosial</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- Leaflet -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css"/>
|
|
|
|
<!-- App styles -->
|
|
<link rel="stylesheet" href="../css/style.css"/>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<a href="index.php" class="back-btn" title="Lihat Dashboard Publik">👁</a>
|
|
<div class="logo">
|
|
<div class="logo-icon" style="background:#ef4444;">🛡</div>
|
|
<div class="logo-text">PANEL<span style="color:#ef4444;">ADMIN</span></div>
|
|
</div>
|
|
<div class="header-divider"></div>
|
|
<span style="font-size:12px;color:var(--muted);">Kelola Data & Parameter</span>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background:#f59e0b"></div> Masjid
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background:#e879f9"></div> Pend. Miskin
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background:#f59e0b; opacity:0.5;"></div> Dlm. Radius
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer-sep"></div>
|
|
|
|
<!-- Toggle Masjid & Penduduk -->
|
|
<div class="layer-control">
|
|
<button class="layer-btn btn-masjid active" id="btnMasjid" onclick="toggleLayer('masjid')">
|
|
<span class="dot" style="background:#f59e0b"></span>
|
|
Masjid
|
|
</button>
|
|
<button class="layer-btn btn-penduduk active" id="btnPenduduk" onclick="toggleLayer('penduduk')">
|
|
<span class="dot" style="background:#e879f9"></span>
|
|
Pend. Miskin
|
|
</button>
|
|
<button class="layer-btn" id="btnHeatmap" onclick="toggleLayer('heatmap')">
|
|
🔥 Heatmap
|
|
</button>
|
|
<div class="layer-sep"></div>
|
|
<a href="logout.php" class="layer-btn" style="text-decoration:none; color:#ef4444; border-color:#ef444433;">Keluar</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="map"></div>
|
|
|
|
<!-- Stats Panel -->
|
|
<div class="stats-panel-container glass" style="position:absolute; top:80px; right:10px; z-index:1000; width:220px; border-radius:8px; padding:12px; background:#0a0d14ea; border:1px solid #1e2233; color:#fff;">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; border-bottom:1px solid #1e2233; padding-bottom:5px;">
|
|
<span style="font-weight:700; font-size:12px;">📊 STATISTIK SOSIAL</span>
|
|
<button id="statsToggleBtn" onclick="toggleStats()" style="background:none;border:none;color:#9ca3af;cursor:pointer">▲</button>
|
|
</div>
|
|
<div id="statsContent">
|
|
<!-- Rendered by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blind Spot Alert -->
|
|
<div id="blindSpotPanel" class="glass" style="display:none; position:absolute; bottom:30px; right:10px; z-index:1000; background:#7f1d1d; border:1px solid #ef4444; border-radius:8px; padding:12px; color:#fff; cursor:pointer; align-items:center; gap:10px; box-shadow:0 10px 15px -3px rgba(239,68,68,0.3)" onclick="zoomToBlindSpots()">
|
|
<span style="font-size:24px">⚠️</span>
|
|
<div>
|
|
<div style="font-weight:700;font-size:14px"><span id="blindSpotCount">0</span> Keluarga di Blind Spot!</div>
|
|
<div style="font-size:11px;color:#fca5a5">Sangat Rentan & Tidak terjangkau masjid (Klik untuk Zoom)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script>
|
|
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
|
|
<script src="https://unpkg.com/leaflet-geometryutil/src/leaflet.geometryutil.js"></script>
|
|
|
|
<!-- Mode Selector Panel (Bottom Left) -->
|
|
<div class="mode-panel-container" style="position: absolute; bottom: 30px; left: 10px; z-index: 1000;">
|
|
<div class="mode-panel-box glass">
|
|
<div class="mode-panel-title">Pilih Mode Pointing</div>
|
|
<div class="mode-options">
|
|
<label class="mode-panel-label">
|
|
<input type="radio" name="mode" value="masjid" checked onclick="setMode('masjid')">
|
|
<div class="mode-item">
|
|
<span class="mode-panel-icon">🕌</span> <span>Tambah Masjid</span>
|
|
</div>
|
|
</label>
|
|
<label class="mode-panel-label">
|
|
<input type="radio" name="mode" value="penduduk" onclick="setMode('penduduk')">
|
|
<div class="mode-item">
|
|
<span class="mode-panel-icon">👨👩👧👦</span> <span>Tambah Pend. Miskin</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App script -->
|
|
<script src="../js/draw_sosial.js?v=<?= time() ?>"></script>
|
|
<script>
|
|
window.setMode = function(mode) {
|
|
console.log('Mode changed to: ' + mode);
|
|
};
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|