powji/webgis-pemetaan-sosial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
21307a323e341d37a9d718daf16744a666990974
webgis-pemetaan-sosial/WebGISPovertyMapping/index.php
T

231 lines
11 KiB
PHP
Raw Blame History

<?php
session_start();
$isLoggedIn = isset($_SESSION['user']);
$role = $isLoggedIn ? $_SESSION['role'] : 'viewer';
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sistem Pemetaan</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="sidebar">
<div class="sidebar-header">
<i class="fa-solid fa-map-location-dot"></i>
<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">
<?php if ($isLoggedIn): ?>
<div class="user-info">
<i class="fa-solid fa-circle-user"></i>
<span><?= htmlspecialchars($_SESSION['nama']) ?></span>
<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>
<div class="mode-buttons">
<button class="mode-btn" data-mode="prasejahtera" onclick="ubahMode('prasejahtera')">
<i class="fa-solid fa-house-chimney-crack"></i>
Prasejahtera
</button>
<button class="mode-btn mode-ibadah" data-mode="ibadah" onclick="ubahMode('ibadah')">
<i class="fa-solid fa-place-of-worship"></i>
Rumah Ibadah
</button>
</div>
<?php endif; ?>
<?php if ($role === 'admin'): ?>
<div class="sidebar-divider"></div>
<span class="sidebar-label">Manajemen</span>
<a href="users.php" class="menu-link">
<i class="fa-solid fa-users-gear"></i> Kelola User
</a>
<?php endif; ?>
<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)">
<span class="layer-dot" style="background:#27ae60;"></span>
Prasejahtera Tercakup
</label>
<label class="layer-item">
<input type="checkbox" checked onchange="toggleLayer('tidakTercakup', this)">
<span class="layer-dot" style="background:#e74c3c;"></span>
Prasejahtera Tidak Tercakup
</label>
<label class="layer-item">
<input type="checkbox" checked onchange="toggleLayer('ibadah', this)">
<span class="layer-dot" style="background:#9b59b6;"></span>
Rumah Ibadah
</label>
<label class="layer-item">
<input type="checkbox" checked onchange="toggleLayer('radius', this)">
<span class="layer-radius-icon"></span>
Radius Jangkauan
</label>
<label class="layer-item" style="cursor:pointer;">
<input type="checkbox" id="checkbox-heatmap" checked onchange="toggleHeatmap()">
<span class="layer-heatmap-icon"></span>
Heatmap Kemiskinan
</label>
</div>
<?php else: ?>
<div class="viewer-info">
<i class="fa-solid fa-eye"></i> Anda melihat sebagai <b>Viewer</b>
</div>
<a href="login.php" class="btn-login">
<i class="fa-solid fa-right-to-bracket"></i> Login
</a>
<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>
<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)">
<span class="layer-dot" style="background:#27ae60;"></span>
Prasejahtera Tercakup
</label>
<label class="layer-item">
<input type="checkbox" checked onchange="toggleLayer('tidakTercakup', this)">
<span class="layer-dot" style="background:#e74c3c;"></span>
Prasejahtera Tidak Tercakup
</label>
<label class="layer-item">
<input type="checkbox" checked onchange="toggleLayer('ibadah', this)">
<span class="layer-dot" style="background:#9b59b6;"></span>
Rumah Ibadah
</label>
<label class="layer-item">
<input type="checkbox" checked onchange="toggleLayer('radius', this)">
<span class="layer-radius-icon"></span>
Radius Jangkauan
</label>
<label class="layer-item" style="cursor:pointer;">
<input type="checkbox" id="checkbox-heatmap" checked onchange="toggleHeatmap()">
<span class="layer-heatmap-icon"></span>
Heatmap Kemiskinan
</label>
</div>
<?php endif; ?>
</div>
</div>
<div id="map-container">
<div id="map"></div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
<!-- Pass role ke JavaScript -->
<script>
const ROLE = '<?= $role ?>';
</script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink