140 lines
7.9 KiB
PHP
140 lines
7.9 KiB
PHP
<?php
|
|
session_set_cookie_params(['path' => '/']);
|
|
session_start();
|
|
|
|
require_once '../api/db.php';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WebGIS Poverty Mapping - Dashboard Sosial & Warga</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/leaflet.draw/1.0.4/leaflet.draw.css"/>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<button class="menu-toggle" onclick="toggleSidebar()" title="Buka Dashboard Eksekutif"><i class="fas fa-bars"></i></button>
|
|
<button onclick="window.location.href='../portal/index.php'" style="position: absolute; top: 15px; left: 65px; z-index: 1200; background: white; color: var(--primary); border: 2px solid var(--primary); padding: 10px 20px; border-radius: 30px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.1); font-size: 0.9rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px;" onmouseover="this.style.background='var(--primary)'; this.style.color='white';" onmouseout="this.style.background='white'; this.style.color='var(--primary)';">
|
|
<i class="fas fa-arrow-left"></i> Kembali ke Dashboard
|
|
</button>
|
|
<button class="menu-toggle" style="left: auto; right: 20px; background: var(--primary);" onclick="toggleRightPanel()" title="Buka Form Input">
|
|
<i class="fas fa-pen"></i>
|
|
</button>
|
|
|
|
<div class="search-container">
|
|
<div class="search-box">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="searchInput" placeholder="Cari data GIS..." onkeyup="filterData()">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebar">
|
|
<div class="sidebar-header">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
|
|
<div>
|
|
<h3><i class="fas fa-users"></i> Peta Sosial Warga</h3>
|
|
<small><i class="fas fa-hands-helping"></i> Dashboard Admin Sosial</small>
|
|
</div>
|
|
<div style="display: flex; gap: 8px;">
|
|
<a href="../portal/index.php" title="Kembali ke Portal Utama" style="color: #fff; background: rgba(255,255,255,0.2); padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.9rem; transition: 0.3s;" onmouseover="this.style.background='rgba(59, 130, 246, 0.8)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">
|
|
<i class="fas fa-home"></i>
|
|
</a>
|
|
<a href="#" id="notifBell" title="Notifikasi Laporan Warga" style="position: relative; color: #fff; background: rgba(255,255,255,0.2); padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.9rem; transition: 0.3s;" onclick="toggleSidebar()">
|
|
<i class="fas fa-bell"></i>
|
|
<span id="notifBadge" style="display: none; position: absolute; top: -5px; right: -5px; background: #ef4444; color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.6rem; font-weight: bold; border: 2px solid #1e293b; animation: bounce 1s infinite;">0</span>
|
|
</a>
|
|
<a href="../portal/logout.php" title="Logout" style="color: #fff; background: rgba(255,255,255,0.2); padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.9rem; transition: 0.3s;" onmouseover="this.style.background='rgba(239, 68, 68, 0.8)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-content" id="sidebarContent">
|
|
<!-- Dirender secara dinamis oleh script.js -->
|
|
<small>Memuat data...</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="map"></div>
|
|
|
|
<div class="panel-input" id="panelInput">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 15px;">
|
|
<h4 style="margin:0; border:none; padding:0; font-size:1.1rem; color:var(--dark);">Form Input & Laporan</h4>
|
|
<button onclick="toggleRightPanel()" style="background:none; border:none; cursor:pointer; font-size:1.2rem; color:#94a3b8; transition:0.2s;" onmouseover="this.style.color='#ef4444'" onmouseout="this.style.color='#94a3b8'"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
|
|
<div class="radius-box">
|
|
<label>📡 Radius Jangkauan / Bantuan: <span id="radiusVal">500</span>m</label>
|
|
<input type="range" id="radiusRange" min="100" max="5000" value="500" step="100" oninput="changeRadius(this.value)">
|
|
</div>
|
|
|
|
<select id="jenis" onchange="toggleForm()">
|
|
<option value="pelaporan">🚨 Pelaporan Cepat (Masyarakat)</option>
|
|
<option value="warga">📍 Warga (Update Admin)</option>
|
|
<option value="masjid">🕌 Tempat Ibadah / Pusat Bantuan</option>
|
|
</select>
|
|
<!-- FORM PELAPORAN -->
|
|
<div id="form_pelaporan">
|
|
<p style="font-size:0.75rem; color:var(--danger); margin-top:0;">*Gunakan ini untuk lapor kasus gizi buruk, sakit, dll.</p>
|
|
<input type="text" id="nama_pelapor" placeholder="Nama Pelapor (Anda)">
|
|
<textarea id="isi_laporan" placeholder="Jelaskan kondisi darurat..."></textarea>
|
|
</div>
|
|
|
|
<!-- FORM WARGA -->
|
|
<div id="form_warga" class="hidden">
|
|
<input type="text" id="nama_kk" placeholder="Nama Kepala Keluarga">
|
|
<input type="number" id="jumlah_kk" placeholder="Jumlah Anggota">
|
|
<label style="font-size:0.75rem; color:#666;">Tanggal Lahir Kepala Keluarga:</label>
|
|
<input type="date" id="tanggal_lahir" title="Tanggal Lahir">
|
|
<select id="pendidikan">
|
|
<option value="">- Pilih Pendidikan Terakhir -</option>
|
|
<option value="Tidak Sekolah">Tidak Sekolah</option>
|
|
<option value="SD">SD Sederajat</option>
|
|
<option value="SMP">SMP Sederajat</option>
|
|
<option value="SMA">SMA Sederajat</option>
|
|
<option value="Perguruan Tinggi">Perguruan Tinggi</option>
|
|
</select>
|
|
<input type="text" id="riwayat_penyakit" placeholder="Riwayat Penyakit (misal: Stunting, TBC)">
|
|
<select id="status_bantuan">
|
|
<option value="Belum">Belum Menerima Bantuan</option>
|
|
<option value="Sudah">Sudah Menerima Bantuan</option>
|
|
</select>
|
|
<textarea id="histori_bantuan" placeholder="Histori Bantuan (misal: Sembako Jan 2026, PKH)"></textarea>
|
|
<textarea id="alamat_warga" placeholder="Alamat lengkap..."></textarea>
|
|
</div>
|
|
|
|
<!-- FORM MASJID -->
|
|
<div id="form_masjid" class="hidden">
|
|
<input type="text" id="nama_masjid" placeholder="Nama Tempat Ibadah">
|
|
<select id="jenis_masjid">
|
|
<option value="Masjid">Masjid</option>
|
|
<option value="Gereja">Gereja</option>
|
|
<option value="Vihara">Vihara / Klenteng</option>
|
|
<option value="Pura">Pura</option>
|
|
</select>
|
|
<input type="text" id="pic_masjid" placeholder="Nama Pengurus / PIC">
|
|
<textarea id="alamat_masjid" placeholder="Alamat lengkap..."></textarea>
|
|
</div>
|
|
|
|
<!-- END FORMS -->
|
|
|
|
<input type="hidden" id="lat"><input type="hidden" id="lng"><input type="hidden" id="edit_id" value="0">
|
|
<div style="display:flex; gap:10px;">
|
|
<button class="btn-save" id="btnSimpanUtama" onclick="simpanData()" style="flex:1;">Simpan Data</button>
|
|
<button class="btn-del" id="btnBatalEdit" onclick="batalEdit()" style="display:none; padding:14px; border-radius:10px; font-weight:700;">Batal</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
<script>
|
|
// Penanda untuk script.js agar tahu konteks dashboard
|
|
window.dashboardType = 'sosial';
|
|
</script>
|
|
<script src="script.js?v=<?= time(); ?>"></script>
|
|
|
|
</body>
|
|
</html>
|