unknown
965 lines
35 KiB
HTML
965 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Sistem Pemetaan Kemiskinan</title>
|
|
|
|
<!-- LEAFLET -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<!-- LEAFLET DRAW -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css"/>
|
|
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
|
|
|
|
<!-- LEAFLET GEOMETRY UTIL -->
|
|
<script src="https://unpkg.com/leaflet-geometryutil"></script>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-family: 'Segoe UI', Tahoma, sans-serif;
|
|
background: #f1f3f6;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* SIDEBAR */
|
|
#sidebar {
|
|
width: 320px;
|
|
background: linear-gradient(180deg, #1e3c72, #2a5298);
|
|
color: white;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
box-shadow: 2px 0 10px rgba(0,0,0,0.2);
|
|
z-index: 100;
|
|
}
|
|
|
|
#sidebar h2 {
|
|
font-size: 18px;
|
|
margin-bottom: 15px;
|
|
border-bottom: 2px solid rgba(255,255,255,0.3);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.tab-buttons {
|
|
display: flex;
|
|
gap: 5px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.tab-button {
|
|
flex: 1;
|
|
padding: 8px;
|
|
background: rgba(255,255,255,0.2);
|
|
border: none;
|
|
color: white;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.tab-button.active {
|
|
background: rgba(255,255,255,0.5);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tab-button:hover {
|
|
background: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
#search, #filter {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.list-container {
|
|
display: none;
|
|
max-height: 450px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.list-container.active {
|
|
display: block;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
ul li {
|
|
padding: 12px;
|
|
margin-bottom: 8px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
font-size: 13px;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
ul li:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
transform: translateX(5px);
|
|
border-left-color: #4CAF50;
|
|
}
|
|
|
|
ul li small {
|
|
opacity: 0.8;
|
|
display: block;
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ACCORDION */
|
|
.accordion {
|
|
background-color: rgba(255,255,255,0.1);
|
|
color: white;
|
|
cursor: pointer;
|
|
padding: 12px;
|
|
width: 100%;
|
|
text-align: left;
|
|
border: none;
|
|
outline: none;
|
|
transition: 0.4s;
|
|
font-weight: bold;
|
|
border-radius: 5px;
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.accordion.active, .accordion:hover {
|
|
background-color: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.panel {
|
|
padding: 0 10px;
|
|
background-color: transparent;
|
|
display: none;
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* MAP */
|
|
#map {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
/* MODAL */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.modal.active {
|
|
display: block;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #fefefe;
|
|
margin: 5% auto;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
border-radius: 10px;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
border-bottom: 2px solid #1e3c72;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.modal-header h2 {
|
|
color: #1e3c72;
|
|
}
|
|
|
|
.close-btn {
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
color: #999;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.form-group input, .form-group select, .form-group textarea {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
font-size: 13px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-group textarea {
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
button {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #4CAF50;
|
|
color: white;
|
|
flex: 1;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #45a049;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #f44336;
|
|
color: white;
|
|
flex: 1;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #da190b;
|
|
}
|
|
|
|
.status-label {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-ya {
|
|
background: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.status-tidak {
|
|
background: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
.status-proses {
|
|
background: #ff9800;
|
|
color: white;
|
|
}
|
|
|
|
.info-section {
|
|
background: #f9f9f9;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
border-left: 4px solid #1e3c72;
|
|
}
|
|
|
|
.info-section h3 {
|
|
color: #1e3c72;
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 5px 0;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: bold;
|
|
color: #666;
|
|
}
|
|
|
|
.info-value {
|
|
color: #333;
|
|
}
|
|
|
|
/* ALERT */
|
|
.alert {
|
|
padding: 12px;
|
|
margin-bottom: 15px;
|
|
border-radius: 5px;
|
|
display: none;
|
|
}
|
|
|
|
.alert.active {
|
|
display: block;
|
|
}
|
|
|
|
.alert-success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.alert-error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
/* LOADING */
|
|
.loading {
|
|
display: none;
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #666;
|
|
}
|
|
|
|
.loading.active {
|
|
display: block;
|
|
}
|
|
|
|
.spinner {
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid #1e3c72;
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 10px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<!-- SIDEBAR -->
|
|
<div id="sidebar">
|
|
<a href="index.html" style="display:inline-block; margin-bottom:15px; color:#fff; text-decoration:none; font-size:12px; background:rgba(255,255,255,0.2); padding:5px 10px; border-radius:5px;">← Kembali ke Portal</a>
|
|
<h2>📍 Portal Pemetaan Terpadu</h2>
|
|
|
|
<!-- ACCORDION: FASILITAS KOTA -->
|
|
<button class="accordion">🏗️ Fasilitas Kota <span>▼</span></button>
|
|
<div class="panel">
|
|
<div class="tab-buttons" style="flex-wrap: wrap;">
|
|
<button class="tab-button" data-tab="jalan" style="margin-bottom:5px;">Jalan</button>
|
|
<button class="tab-button" data-tab="polygon" style="margin-bottom:5px;">Area</button>
|
|
<button class="tab-button" data-tab="spbu" style="margin-bottom:5px;">SPBU</button>
|
|
</div>
|
|
|
|
<div style="display:flex;gap:5px;margin-bottom:10px;">
|
|
<button class="btn-primary" onclick="alert('Untuk menambahkan data Jalan, gunakan ikon menggambar Garis (Polyline) di pojok kiri peta.')" style="font-size:11px;padding:5px;background:#555;">+ Jalan</button>
|
|
<button class="btn-primary" onclick="alert('Untuk menambahkan Area, gunakan ikon menggambar Polygon di pojok kiri peta.')" style="font-size:11px;padding:5px;background:#555;">+ Area</button>
|
|
<button class="btn-primary" onclick="openModal('modal-form-spbu')" style="font-size:11px;padding:5px;">+ SPBU</button>
|
|
</div>
|
|
|
|
<!-- TAB: JALAN -->
|
|
<div id="tab-jalan" class="list-container">
|
|
<ul id="list-jalan"></ul>
|
|
</div>
|
|
|
|
<!-- TAB: POLYGON -->
|
|
<div id="tab-polygon" class="list-container">
|
|
<ul id="list-polygon"></ul>
|
|
</div>
|
|
|
|
<!-- TAB: SPBU -->
|
|
<div id="tab-spbu" class="list-container">
|
|
<ul id="list-spbu"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ACCORDION: SOSIALISASI KEMASYARAKATAN -->
|
|
<button class="accordion">👥 Sosialisasi Kemasyarakatan <span>▼</span></button>
|
|
<div class="panel">
|
|
<div class="tab-buttons">
|
|
<button class="tab-button" data-tab="masyarakat">Masyarakat</button>
|
|
<button class="tab-button" data-tab="ibadah">Rumah Ibadah</button>
|
|
</div>
|
|
|
|
<div style="display:flex;gap:5px;margin-bottom:10px;">
|
|
<button class="btn-primary" onclick="openModal('modal-form-masyarakat')" style="font-size:11px;padding:5px;">+ Masyarakat</button>
|
|
<button class="btn-primary" onclick="openModal('modal-form-ibadah')" style="font-size:11px;padding:5px;">+ Rumah Ibadah</button>
|
|
</div>
|
|
|
|
<!-- TAB: MASYARAKAT MISKIN -->
|
|
<div id="tab-masyarakat" class="list-container">
|
|
<input type="text" id="search" placeholder="Cari nama/alamat...">
|
|
|
|
<select id="filter-kecamatan">
|
|
<option value="">- Pilih Kecamatan -</option>
|
|
<option value="Pontianak Kota">Pontianak Kota</option>
|
|
<option value="Pontianak Utara">Pontianak Utara</option>
|
|
<option value="Pontianak Barat">Pontianak Barat</option>
|
|
<option value="Pontianak Selatan">Pontianak Selatan</option>
|
|
<option value="Pontianak Tenggara">Pontianak Tenggara</option>
|
|
</select>
|
|
|
|
<select id="filter-bpjs">
|
|
<option value="">- Status BPJS -</option>
|
|
<option value="Ya">BPJS Aktif</option>
|
|
<option value="Tidak">Tidak BPJS</option>
|
|
<option value="Proses">Proses</option>
|
|
</select>
|
|
|
|
<ul id="list-masyarakat"></ul>
|
|
</div>
|
|
|
|
<!-- TAB: RUMAH IBADAH -->
|
|
<div id="tab-ibadah" class="list-container">
|
|
<select id="filter-jenis">
|
|
<option value="">- Semua Jenis -</option>
|
|
<option value="Masjid">Masjid</option>
|
|
<option value="Gereja">Gereja</option>
|
|
<option value="Vihara">Vihara</option>
|
|
<option value="Kelenteng">Kelenteng</option>
|
|
<option value="Lain">Lain-lain</option>
|
|
</select>
|
|
|
|
<ul id="list-ibadah"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ACCORDION: PORTAL PUBLIK -->
|
|
<button class="accordion" id="acc-publik">📢 Layanan Publik & Laporan <span>▼</span></button>
|
|
<div class="panel">
|
|
<div class="tab-buttons">
|
|
<button class="tab-button" data-tab="pelaporan">Lapor Darurat</button>
|
|
<button class="tab-button" data-tab="info-fasilitas">Info Terdekat</button>
|
|
</div>
|
|
|
|
<!-- TAB: PELAPORAN DARURAT -->
|
|
<div id="tab-pelaporan" class="list-container">
|
|
<div style="background:#fee2e2; padding:15px; border-radius:8px; margin-bottom:15px; border-left:4px solid #ef4444;">
|
|
<h3 style="color:#b91c1c; margin:0 0 5px 0; font-size:14px;"><i class="fa-solid fa-triangle-exclamation"></i> Darurat/Bencana</h3>
|
|
<p style="font-size:12px; color:#7f1d1d; margin:0 0 10px 0;">Laporkan segera jika terjadi kebakaran, banjir, darurat medis, atau jalan rusak parah.</p>
|
|
<button class="btn-primary" onclick="alert('Formulir Laporan Terkirim ke BPBD / Kepolisian Resort Kota Pontianak!')" style="width:100%; background:#ef4444; border:none; padding:10px;">🚨 Panggil Bantuan</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAB: INFO FASILITAS -->
|
|
<div id="tab-info-fasilitas" class="list-container">
|
|
<p style="font-size:12px; color:#cbf4c9; background:#166534; padding:10px; border-radius:5px;">Klik icon lokasi pada peta untuk melihat Detail Fasilitas, SPBU terdekat, maupun Rumah Ibadah di area sekitar Anda.</p>
|
|
<ul class="data-list" id="list-info-terdekat">
|
|
<li style="text-align:center; color:#94a3b8; padding:20px; font-style:italic;">Silakan berinteraksi dengan peta</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MAP -->
|
|
<div id="map"></div>
|
|
</div>
|
|
|
|
<!-- MODAL: DETAIL MASYARAKAT -->
|
|
<div id="modal-detail" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Detail Masyarakat</h2>
|
|
<button class="close-btn" onclick="closeModal('modal-detail')">×</button>
|
|
</div>
|
|
<div id="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL: FORM INPUT MASYARAKAT -->
|
|
<div id="modal-form-masyarakat" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Input Masyarakat Miskin</h2>
|
|
<button class="close-btn" onclick="closeModal('modal-form-masyarakat')">×</button>
|
|
</div>
|
|
|
|
<div id="alert-form" class="alert"></div>
|
|
|
|
<form id="form-masyarakat">
|
|
<div style="
|
|
background:#e8f4ff;
|
|
padding:10px;
|
|
margin-bottom:10px;
|
|
border-radius:5px;
|
|
font-size:12px;">
|
|
📍 Klik lokasi rumah warga pada peta untuk mengisi Latitude dan Longitude secara otomatis.
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Nama Lengkap *</label>
|
|
<input type="text" name="nama" required>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Tanggal Lahir</label>
|
|
<input type="date" name="tanggal_lahir">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Jenis Kelamin</label>
|
|
<select name="jenis_kelamin">
|
|
<option value="Laki-laki">Laki-laki</option>
|
|
<option value="Perempuan">Perempuan</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>NIK</label>
|
|
<input type="text" name="nik" placeholder="16 digit">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Alamat *</label>
|
|
<textarea name="alamat" required></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Kelurahan</label>
|
|
<input type="text" name="kelurahan">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Kecamatan</label>
|
|
<select name="kecamatan">
|
|
<option value="">Pilih Kecamatan</option>
|
|
<option value="Pontianak Kota">Pontianak Kota</option>
|
|
<option value="Pontianak Utara">Pontianak Utara</option>
|
|
<option value="Pontianak Barat">Pontianak Barat</option>
|
|
<option value="Pontianak Selatan">Pontianak Selatan</option>
|
|
<option value="Pontianak Tenggara">Pontianak Tenggara</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Latitude *</label>
|
|
<input type="number" name="latitude" step="0.00000001" required readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Longitude *</label>
|
|
<input type="number" name="longitude" step="0.00000001" required readonly>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>No. HP</label>
|
|
<input type="text" name="no_hp" placeholder="Cth: 081234567890">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Status BPJS *</label>
|
|
<select name="status_bpjs" id="form-status-bpjs" required>
|
|
<option value="Tidak">Tidak Memiliki</option>
|
|
<option value="Ya">Sudah Memiliki</option>
|
|
<option value="Proses">Proses Pendaftaran</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BPJS Detail Fields (Hanya muncul jika Status BPJS = Ya) -->
|
|
<div id="bpjs-detail-fields" style="display: none; background: #f0fdf4; border: 1px dashed #4caf50; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
|
|
<h4 style="margin: 0 0 10px 0; color: #1e3c72; font-size: 13px;">🏥 Informasi Kepesertaan BPJS</h4>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>No. Peserta BPJS *</label>
|
|
<input type="text" name="bpjs_no_peserta" placeholder="Cth: 0001234567890">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Jenis BPJS</label>
|
|
<select name="bpjs_jenis_bpjs">
|
|
<option value="Kesehatan">Kesehatan</option>
|
|
<option value="Ketenagakerjaan">Ketenagakerjaan</option>
|
|
<option value="Jaminan Hari Tua">Jaminan Hari Tua</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Tingkat</label>
|
|
<select name="bpjs_tingkat">
|
|
<option value="Penerima Bantuan Iuran (PBI)">Penerima Bantuan Iuran (PBI)</option>
|
|
<option value="Pekerja Penerima Upah">Pekerja Penerima Upah</option>
|
|
<option value="Pekerja Bukan Penerima Upah">Pekerja Bukan Penerima Upah</option>
|
|
<option value="Peserta Mandiri">Peserta Mandiri</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Status Aktif</label>
|
|
<select name="bpjs_status_aktif">
|
|
<option value="Aktif">Aktif</option>
|
|
<option value="Nonaktif">Nonaktif</option>
|
|
<option value="Suspended">Suspended</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Tanggal Daftar *</label>
|
|
<input type="date" name="bpjs_tanggal_daftar">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Faskes Tingkat 1</label>
|
|
<input type="text" name="bpjs_faskes_tingkat_1" placeholder="Cth: Puskesmas Pontianak Kota">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Pekerjaan</label>
|
|
<input type="text" name="pekerjaan" placeholder="Cth: Buruh, Petani, dll">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Pendapatan Bulanan (Rp)</label>
|
|
<input type="number" name="pendapatan_bulanan">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Jumlah Tanggungan</label>
|
|
<input type="number" name="jumlah_tanggungan" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Status Rumah</label>
|
|
<select name="status_rumah">
|
|
<option value="Menumpang">Menumpang</option>
|
|
<option value="Sewa">Sewa</option>
|
|
<option value="Milik Sendiri">Milik Sendiri</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button type="submit" class="btn-primary">Simpan Data</button>
|
|
<button type="button" class="btn-secondary" onclick="closeModal('modal-form-masyarakat')">Batal</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL: FORM INPUT RUMAH IBADAH -->
|
|
<div id="modal-form-ibadah" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Input Rumah Ibadah</h2>
|
|
<button class="close-btn" onclick="closeModal('modal-form-ibadah')">×</button>
|
|
</div>
|
|
|
|
<div id="alert-form-ibadah" class="alert"></div>
|
|
|
|
<form id="form-ibadah">
|
|
<div class="form-group">
|
|
<label>Nama Tempat Ibadah *</label>
|
|
<input type="text" name="nama" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Jenis Tempat Ibadah *</label>
|
|
<select name="jenis" required>
|
|
<option value="">Pilih Jenis</option>
|
|
<option value="Masjid">Masjid</option>
|
|
<option value="Gereja">Gereja</option>
|
|
<option value="Vihara">Vihara</option>
|
|
<option value="Kelenteng">Kelenteng</option>
|
|
<option value="Sinagog">Sinagog</option>
|
|
<option value="Lain">Lain-lain</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Alamat *</label>
|
|
<textarea name="alamat" required></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Latitude *</label>
|
|
<input type="number" name="latitude" step="0.00000001" required readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Longitude *</label>
|
|
<input type="number" name="longitude" step="0.00000001" required readonly>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Nama Pemimpin</label>
|
|
<input type="text" name="nama_pemimpin">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>No. HP Pemimpin</label>
|
|
<input type="text" name="no_hp_pemimpin">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Kapasitas (orang)</label>
|
|
<input type="number" name="kapasitas" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tahun Didirikan</label>
|
|
<input type="number" name="tahun_didirikan" min="1900" max="2099">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Keterangan</label>
|
|
<textarea name="keterangan"></textarea>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button type="submit" class="btn-primary">Simpan Data</button>
|
|
<button type="button" class="btn-secondary" onclick="closeModal('modal-form-ibadah')">Batal</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL: FORM INPUT JALAN -->
|
|
<div id="modal-form-jalan" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Input Fasilitas Jalan</h2>
|
|
<button class="close-btn" onclick="closeModal('modal-form-jalan')">×</button>
|
|
</div>
|
|
<div id="alert-form-jalan" class="alert"></div>
|
|
<form id="form-jalan">
|
|
<div style="background:#e8f4ff; padding:10px; margin-bottom:10px; border-radius:5px; font-size:12px;">
|
|
📍 Gunakan tombol <strong>Polyline</strong> di peta untuk menggambar rute jalan, data GeoJSON akan otomatis terisi di bawah.
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nama Jalan *</label>
|
|
<input type="text" name="nama" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tipe Jalan</label>
|
|
<select name="tipe">
|
|
<option value="Jalan Utama">Jalan Utama</option>
|
|
<option value="Jalan Lingkungan">Jalan Lingkungan</option>
|
|
<option value="Jalan Tol">Jalan Tol</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Data GeoJSON *</label>
|
|
<textarea name="geojson" id="geojson-jalan" required readonly placeholder="Gambar garis di peta untuk mengisi ini"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Keterangan</label>
|
|
<textarea name="keterangan"></textarea>
|
|
</div>
|
|
<div class="button-group">
|
|
<button type="submit" class="btn-primary">Simpan Data</button>
|
|
<button type="button" class="btn-secondary" onclick="closeModal('modal-form-jalan')">Batal</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL: FORM INPUT POLYGON -->
|
|
<div id="modal-form-polygon" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Input Fasilitas Area (Polygon)</h2>
|
|
<button class="close-btn" onclick="closeModal('modal-form-polygon')">×</button>
|
|
</div>
|
|
<div id="alert-form-polygon" class="alert"></div>
|
|
<form id="form-polygon">
|
|
<div style="background:#e8f4ff; padding:10px; margin-bottom:10px; border-radius:5px; font-size:12px;">
|
|
📍 Gunakan tombol <strong>Polygon</strong> di peta untuk menggambar area, data GeoJSON akan otomatis terisi di bawah.
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nama Area *</label>
|
|
<input type="text" name="nama" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tipe Area</label>
|
|
<select name="tipe">
|
|
<option value="Taman">Taman Kota</option>
|
|
<option value="Pasar">Pasar / Pusat Perbelanjaan</option>
|
|
<option value="Perumahan">Kawasan Perumahan</option>
|
|
<option value="Lainnya">Lainnya</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Data GeoJSON *</label>
|
|
<textarea name="geojson" id="geojson-polygon" required readonly placeholder="Gambar polygon di peta untuk mengisi ini"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Keterangan</label>
|
|
<textarea name="keterangan"></textarea>
|
|
</div>
|
|
<div class="button-group">
|
|
<button type="submit" class="btn-primary">Simpan Data</button>
|
|
<button type="button" class="btn-secondary" onclick="closeModal('modal-form-polygon')">Batal</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL: FORM INPUT SPBU -->
|
|
<div id="modal-form-spbu" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Input SPBU</h2>
|
|
<button class="close-btn" onclick="closeModal('modal-form-spbu')">×</button>
|
|
</div>
|
|
<div id="alert-form-spbu" class="alert"></div>
|
|
<form id="form-spbu">
|
|
<div style="background:#e8f4ff; padding:10px; margin-bottom:10px; border-radius:5px; font-size:12px;">
|
|
📍 Klik lokasi di peta untuk mengisi Latitude dan Longitude secara otomatis.
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nama SPBU *</label>
|
|
<input type="text" name="nama" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Latitude *</label>
|
|
<input type="number" name="latitude" id="lat-spbu" step="0.00000001" required readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Longitude *</label>
|
|
<input type="number" name="longitude" id="lng-spbu" step="0.00000001" required readonly>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Alamat Lengkap</label>
|
|
<textarea name="alamat"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Buka 24 Jam?</label>
|
|
<select name="is_24_jam" required>
|
|
<option value="Tidak">Tidak</option>
|
|
<option value="Ya">Ya, 24 Jam</option>
|
|
</select>
|
|
</div>
|
|
<div class="button-group">
|
|
<button type="submit" class="btn-primary">Simpan Data</button>
|
|
<button type="button" class="btn-secondary" onclick="closeModal('modal-form-spbu')">Batal</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL: FORM INPUT BANTUAN -->
|
|
<div id="modal-form-bantuan" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Tambah Riwayat Bantuan</h2>
|
|
<button class="close-btn" onclick="closeModal('modal-form-bantuan')">×</button>
|
|
</div>
|
|
<div id="alert-form-bantuan" class="alert"></div>
|
|
<form id="form-bantuan">
|
|
<input type="hidden" name="id_masyarakat" id="bantuan-id-masyarakat">
|
|
|
|
<div class="form-group">
|
|
<label>Jenis Bantuan *</label>
|
|
<input type="text" name="jenis_bantuan" required placeholder="Cth: PKH, BPNT, Bantuan Beras, dll">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Tanggal Menerima *</label>
|
|
<input type="date" name="tanggal_bantuan" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nilai Bantuan (Rp) *</label>
|
|
<input type="number" name="nilai" required placeholder="Cth: 200000">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Satuan</label>
|
|
<input type="text" name="satuan" value="Rupiah" placeholder="Cth: Rupiah, Paket, dll">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nama Pemberi Bantuan</label>
|
|
<input type="text" name="nama_pemberi" placeholder="Cth: Dinas Sosial, Baznas, dll">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Keterangan</label>
|
|
<textarea name="keterangan" placeholder="Keterangan tambahan bantuan..."></textarea>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button type="submit" class="btn-primary">Simpan Bantuan</button>
|
|
<button type="button" class="btn-secondary" onclick="closeModal('modal-form-bantuan')">Batal</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/main.js"></script>
|
|
|
|
</body>
|
|
</html>
|