cclwnrty/D1041231092-webgis-povertymap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
cw
2026-06-11 12:30:23 +07:00
commit 2676f3a61c
70 changed files with 9867 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/public/lapor.php
+175
View File
@@ -0,0 +1,175 @@
<?php
$_mapLat = MAP_DEFAULT_LAT;
$_mapLng = MAP_DEFAULT_LNG;
$_appUrl = APP_URL;
$extraJs = <<<JS
<script>
document.addEventListener('DOMContentLoaded', () => {
LocationPicker.init('lapor-map','lat','lng', {$_mapLat}, {$_mapLng});
// Load kecamatan → kelurahan
document.getElementById('kecamatan').addEventListener('change', async function() {
const id = this.value;
const sel = document.getElementById('id_kelurahan');
sel.innerHTML = '<option value="">— Memuat... —</option>';
if (!id) { sel.innerHTML = '<option value="">— Pilih Kelurahan —</option>'; return; }
const data = await App.fetchJSON('{$_appUrl}/api/kelurahan/' + id);
sel.innerHTML = '<option value="">— Pilih Kelurahan —</option>';
if (data) data.forEach(k => {
sel.innerHTML += '<option value="' + k.id + '">' + k.nama + '</option>';
});
});
});
</script>
JS;
?>
<!-- Hero kecil -->
<div style="background:linear-gradient(135deg,var(--clr-primary-d),var(--clr-primary));color:#fff;padding:40px 32px;text-align:center">
<h1 style="font-size:1.8rem;font-weight:800">📝 Lapor Cepat</h1>
<p style="color:rgba(255,255,255,0.75);margin-top:6px">Laporkan warga yang membutuhkan bantuan — gratis, mudah, tanpa login</p>
</div>
<div class="public-container" style="padding-top:36px;padding-bottom:60px">
<?= flashMessage() ?>
<?php
// Kode laporan dari flash — ditampilkan sebagai card permanen (tidak auto-dismiss)
$kodeLaporan = $GLOBALS['_flash_kode_laporan'] ?? null;
?>
<?php if ($kodeLaporan): ?>
<div style="background:#f0fdf4;border:2px solid #22c55e;border-radius:12px;padding:28px;margin-bottom:28px;text-align:center">
<div style="font-size:1rem;color:#15803d;font-weight:600;margin-bottom:10px">✅ Laporan Berhasil Dikirim!</div>
<div style="font-size:0.85rem;color:#166534;margin-bottom:14px">Simpan kode berikut untuk memantau status laporan Anda</div>
<div style="display:inline-block;background:#fff;border:2px dashed #22c55e;border-radius:10px;padding:14px 36px;margin-bottom:16px">
<div style="font-size:0.75rem;color:#6b7280;margin-bottom:4px;letter-spacing:1px;text-transform:uppercase">Kode Laporan</div>
<div style="font-size:2rem;font-weight:900;letter-spacing:6px;color:#15803d;font-family:monospace"><?= e($kodeLaporan) ?></div>
</div>
<br>
<button type="button"
onclick="navigator.clipboard.writeText('<?= e($kodeLaporan) ?>').then(()=>{this.textContent='✅ Tersalin!';this.style.background='#15803d';setTimeout(()=>{this.textContent='📋 Salin Kode';this.style.background='';},2000);})"
class="btn btn-primary btn-sm" style="margin-right:8px">📋 Salin Kode</button>
<a href="<?= APP_URL ?>/cek-laporan?kode=<?= urlencode($kodeLaporan) ?>" class="btn btn-secondary btn-sm">🔍 Cek Status</a>
</div>
<?php endif; ?>
<div style="display:grid;grid-template-columns:1fr 380px;gap:28px">
<!-- FORM -->
<div>
<form method="POST" action="<?= APP_URL ?>/lapor" enctype="multipart/form-data">
<?= csrfField() ?>
<div class="card" style="margin-bottom:20px">
<div class="card-header"><span class="card-icon">👤</span><h3>Data Pelapor</h3></div>
<div class="card-body">
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Nama Pelapor <span class="required">*</span></label>
<input type="text" name="nama_pelapor" class="form-control" required placeholder="Nama lengkap Anda">
</div>
<div class="form-group">
<label class="form-label">No. HP (WhatsApp)</label>
<input type="text" name="no_hp_pelapor" class="form-control" placeholder="08xxxxxxxxxx">
</div>
</div>
</div>
</div>
<div class="card" style="margin-bottom:20px">
<div class="card-header"><span class="card-icon">🏠</span><h3>Data Warga yang Dilaporkan</h3></div>
<div class="card-body">
<div class="form-group">
<label class="form-label">Nama Warga <span class="required">*</span></label>
<input type="text" name="nama_warga" class="form-control" required placeholder="Nama lengkap warga yang membutuhkan bantuan">
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Kecamatan <span class="required">*</span></label>
<select id="kecamatan" class="form-control" required>
<option value="">— Pilih Kecamatan —</option>
<?php foreach($kecamatan as $k): ?>
<option value="<?= $k['id'] ?>"><?= e($k['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">Kelurahan <span class="required">*</span></label>
<select name="id_kelurahan" id="id_kelurahan" class="form-control" required>
<option value="">— Pilih Kelurahan —</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">Alamat Lengkap <span class="required">*</span></label>
<textarea name="alamat_warga" class="form-control" rows="2" required placeholder="Nama jalan, nomor rumah, RT/RW"></textarea>
</div>
<div class="form-group">
<label class="form-label">Deskripsi Kondisi <span class="required">*</span></label>
<textarea name="deskripsi" class="form-control" rows="3" required placeholder="Ceritakan kondisi warga, mengapa membutuhkan bantuan, kondisi rumah, dll."></textarea>
</div>
<div class="form-group">
<label class="form-label">Foto Kondisi (Opsional)</label>
<input type="file" name="foto" class="form-control" accept="image/*">
<div class="form-hint">Foto rumah atau kondisi warga membantu proses verifikasi</div>
</div>
</div>
</div>
<div class="card" style="margin-bottom:20px">
<div class="card-header"><span class="card-icon">📍</span><h3>Lokasi Rumah Warga</h3></div>
<div class="card-body">
<div id="lapor-map" style="height:300px;border-radius:8px;border:1px solid var(--clr-border);margin-bottom:12px"></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div class="form-group">
<label class="form-label">Latitude <span class="required">*</span></label>
<input type="number" name="lat" id="lat" class="form-control" step="0.0000001" required placeholder="-0.0263">
</div>
<div class="form-group">
<label class="form-label">Longitude <span class="required">*</span></label>
<input type="number" name="lng" id="lng" class="form-control" step="0.0000001" required placeholder="109.3425">
</div>
</div>
<div class="form-hint">📌 Klik pada peta atau drag marker untuk menentukan lokasi rumah warga secara tepat</div>
</div>
</div>
<button type="submit" class="btn btn-primary w-full" style="padding:13px;font-size:1rem;justify-content:center">
📤 Kirim Laporan
</button>
<div style="margin-top:10px;text-align:center;font-size:0.8rem;color:var(--clr-text-muted)">
Laporan akan diverifikasi oleh petugas. Simpan kode laporan untuk memantau status.
</div>
</form>
</div>
<!-- SIDEBAR INFO -->
<div>
<div class="card" style="position:sticky;top:80px">
<div class="card-header"><span class="card-icon">ℹ️</span><h3>Informasi Penting</h3></div>
<div class="card-body" style="display:flex;flex-direction:column;gap:16px">
<div style="padding:14px;background:#f0fdf4;border-radius:8px;border:1px solid #bbf7d0">
<div style="font-weight:700;color:var(--clr-success);margin-bottom:6px">✅ Apa yang terjadi setelah laporan?</div>
<ol style="margin:0;padding-left:18px;font-size:0.82rem;color:#166534;line-height:2">
<li>Laporan diterima dan diberi kode unik</li>
<li>Verifikator kelurahan melakukan survei</li>
<li>Data masuk sistem pemetaan GIS</li>
<li>Rumah ibadah terdekat mendapat notifikasi</li>
<li>Bantuan disalurkan sesuai prioritas</li>
</ol>
</div>
<div style="padding:14px;background:#eff6ff;border-radius:8px;border:1px solid #bfdbfe">
<div style="font-weight:700;color:var(--clr-info);margin-bottom:6px">📱 Cek Status Laporan</div>
<div style="font-size:0.82rem;color:#1e40af">Simpan kode laporan yang diberikan setelah mengirim untuk memantau status verifikasi.</div>
<a href="<?= APP_URL ?>/cek-laporan" class="btn btn-primary btn-sm" style="margin-top:10px">🔍 Cek Status</a>
</div>
<div style="padding:14px;background:#fef9c3;border-radius:8px;border:1px solid #fde047">
<div style="font-weight:700;color:#a16207;margin-bottom:6px">⚠️ Peringatan</div>
<div style="font-size:0.82rem;color:#854d0e">Laporan yang tidak akurat atau laporan palsu akan ditolak. Isi data dengan benar dan jujur.</div>
</div>
</div>
</div>
</div>
</div>
</div>