ocabacaa
380 lines
7.2 KiB
PHP
380 lines
7.2 KiB
PHP
<?php
|
|
|
|
session_start();
|
|
|
|
if(!isset($_SESSION['role'])){
|
|
header("Location: ../index.php");
|
|
exit;
|
|
}
|
|
|
|
if($_SESSION['role'] != 'admin'){
|
|
header("Location: ../index.php");
|
|
exit;
|
|
}
|
|
|
|
include '../config/koneksi.php';
|
|
|
|
$status = isset($_GET['status'])
|
|
? mysqli_real_escape_string($conn,$_GET['status'])
|
|
: '';
|
|
|
|
$query = "SELECT * FROM laporan";
|
|
|
|
if($status != ''){
|
|
$query .= " WHERE status='$status'";
|
|
}
|
|
|
|
$query .= " ORDER BY id DESC";
|
|
|
|
$data = mysqli_query($conn,$query);
|
|
|
|
if(!$data){
|
|
die("Query Error: " . mysqli_error($conn));
|
|
}
|
|
|
|
$total_data = mysqli_num_rows($data);
|
|
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
|
|
<title>Peta Kemiskinan</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
|
|
|
|
<?php include 'layout/style.php'; ?>
|
|
|
|
<style>
|
|
#map {
|
|
height: 80vh;
|
|
width: 100%;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
|
|
}
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<?php include 'layout/navbar.php'; ?>
|
|
|
|
<?php include 'layout/sidebar.php'; ?>
|
|
|
|
<div class="content">
|
|
|
|
|
|
<div class="hero">
|
|
|
|
<h1>Peta Kemiskinan</h1>
|
|
|
|
<p style="margin-top:10px;">
|
|
Visualisasi lokasi laporan kemiskinan berdasarkan status laporan.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="box">
|
|
|
|
<div style="
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
flex-wrap:wrap;
|
|
gap:15px;
|
|
">
|
|
|
|
<div>
|
|
|
|
<h3>Total Data Ditampilkan</h3>
|
|
|
|
<h1 style="
|
|
color:#2563eb;
|
|
margin-top:5px;
|
|
">
|
|
<?= $total_data ?>
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
<form method="GET">
|
|
|
|
<select name="status" style="
|
|
width:auto;
|
|
display:inline-block;
|
|
">
|
|
|
|
<option value="">
|
|
Semua Status
|
|
</option>
|
|
|
|
<option value="pending" <?= $status=='pending' ? 'selected' : '' ?>>
|
|
Pending
|
|
</option>
|
|
|
|
<option value="disetujui" <?= $status=='disetujui' ? 'selected' : '' ?>>
|
|
Disetujui
|
|
</option>
|
|
|
|
<option value="ditolak" <?= $status=='ditolak' ? 'selected' : '' ?>>
|
|
Ditolak
|
|
</option>
|
|
|
|
<option value="diproses" <?= $status=='diproses' ? 'selected' : '' ?>>
|
|
Diproses
|
|
</option>
|
|
|
|
<option value="selesai" <?= $status=='selesai' ? 'selected' : '' ?>>
|
|
Selesai
|
|
</option>
|
|
|
|
</select>
|
|
|
|
<button type="submit" class="btn approve">
|
|
|
|
Filter
|
|
|
|
</button>
|
|
|
|
<a href="peta.php" class="btn delete">
|
|
|
|
Reset
|
|
|
|
</a>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div id="legend">
|
|
|
|
<b>Status Marker</b>
|
|
|
|
<hr style="margin:10px 0;">
|
|
|
|
🟡 Pending <br>
|
|
🟢 Disetujui <br>
|
|
🔴 Ditolak <br>
|
|
🔵 Diproses <br>
|
|
🟣 Selesai
|
|
|
|
</div>
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
|
|
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
|
|
|
|
<script>
|
|
var map = L.map('map').setView(
|
|
[-0.0263, 109.3425],
|
|
11
|
|
);
|
|
|
|
L.tileLayer(
|
|
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap'
|
|
}
|
|
).addTo(map);
|
|
|
|
var markers = L.markerClusterGroup();
|
|
|
|
<?php
|
|
|
|
mysqli_data_seek($data,0);
|
|
|
|
while($row = mysqli_fetch_assoc($data)){
|
|
|
|
if(
|
|
empty($row['latitude']) ||
|
|
empty($row['longitude'])
|
|
){
|
|
continue;
|
|
}
|
|
|
|
$warna = "orange";
|
|
|
|
if($row['status']=="disetujui"){
|
|
$warna = "green";
|
|
}
|
|
elseif($row['status']=="ditolak"){
|
|
$warna = "red";
|
|
}
|
|
elseif($row['status']=="diproses"){
|
|
$warna = "blue";
|
|
}
|
|
elseif($row['status']=="selesai"){
|
|
$warna = "purple";
|
|
}
|
|
|
|
$nama =
|
|
addslashes(
|
|
htmlspecialchars(
|
|
$row['nama_warga']
|
|
));
|
|
|
|
$alamat =
|
|
addslashes(
|
|
htmlspecialchars(
|
|
$row['alamat']
|
|
));
|
|
|
|
$kondisi =
|
|
addslashes(
|
|
htmlspecialchars(
|
|
$row['kondisi']
|
|
));
|
|
|
|
$foto =
|
|
addslashes(
|
|
htmlspecialchars(
|
|
$row['foto']
|
|
));
|
|
|
|
if(empty($row['foto'])){
|
|
|
|
$foto = 'no-image.png';
|
|
}
|
|
|
|
$statusBadge = '';
|
|
|
|
if($row['status']=='pending'){
|
|
$statusBadge = '🟡 Pending';
|
|
}
|
|
elseif($row['status']=='disetujui'){
|
|
$statusBadge = '🟢 Disetujui';
|
|
}
|
|
elseif($row['status']=='ditolak'){
|
|
$statusBadge = '🔴 Ditolak';
|
|
}
|
|
elseif($row['status']=='diproses'){
|
|
$statusBadge = '🔵 Diproses';
|
|
}
|
|
elseif($row['status']=='selesai'){
|
|
$statusBadge = '🟣 Selesai';
|
|
}
|
|
|
|
?>
|
|
|
|
L.circleMarker(
|
|
[
|
|
<?= $row['latitude'] ?>,
|
|
<?= $row['longitude'] ?>
|
|
], {
|
|
radius: 12,
|
|
weight: 2,
|
|
color: '<?= $warna ?>',
|
|
fillColor: '<?= $warna ?>',
|
|
fillOpacity: 0.8
|
|
}
|
|
)
|
|
|
|
.bindPopup(`
|
|
|
|
<div style="width:250px;">
|
|
|
|
<img
|
|
src="../assets/uploads/<?= $foto ?>"
|
|
onerror="this.src='../assets/uploads/no-image.png'"
|
|
style="
|
|
width:100%;
|
|
height:150px;
|
|
object-fit:cover;
|
|
border-radius:10px;
|
|
margin-bottom:10px;
|
|
">
|
|
|
|
<b style="
|
|
font-size:16px;
|
|
">
|
|
<?= $nama ?>
|
|
</b>
|
|
|
|
<hr style="margin:8px 0;">
|
|
|
|
<b>Alamat</b>
|
|
<br>
|
|
<?= $alamat ?>
|
|
|
|
<br><br>
|
|
|
|
<b>Kondisi</b>
|
|
<br>
|
|
<?= $kondisi ?>
|
|
|
|
<br><br>
|
|
|
|
<b>Status</b>
|
|
<br>
|
|
<?= $statusBadge ?>
|
|
|
|
<br><br>
|
|
|
|
<b>Tanggal</b>
|
|
<br>
|
|
<?= !empty($row['created_at'])
|
|
? date('d-m-Y H:i', strtotime($row['created_at']))
|
|
: '-' ?>
|
|
|
|
<br><br>
|
|
|
|
<a
|
|
href="https://www.google.com/maps?q=<?= $row['latitude'] ?>,<?= $row['longitude'] ?>"
|
|
target="_blank"
|
|
style="
|
|
display:inline-block;
|
|
background:#2563eb;
|
|
color:white;
|
|
padding:8px 12px;
|
|
border-radius:8px;
|
|
text-decoration:none;
|
|
">
|
|
|
|
📍 Buka Google Maps
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
`)
|
|
.addTo(markers);
|
|
|
|
<?php } ?>
|
|
|
|
map.addLayer(markers);
|
|
|
|
if (markers.getLayers().length > 0) {
|
|
|
|
map.fitBounds(
|
|
markers.getBounds()
|
|
);
|
|
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|