AleksanderWilliam/WebGIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: memperbaiki warna pada edit card penduduk dan rumah ibadah

Browse Source
This commit is contained in:
Romeo3
2026-06-09 16:40:53 +07:00
parent bccc104e7e
commit bd8a64e1cf
2 changed files with 43 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGISPovertyMap/script.js
+7 -242
View File
@@ -61,78 +61,6 @@ var rumahIbadahIcon = L.divIcon({
popupAnchor: [0, -38]
});
// Leaflet Draw toolbar removed
// ==========================================
// 3. FUNGSI LOAD DATA DARI DATABASE
// ==========================================
/*
function loadBatasKota() {
batasKotaLayer.clearLayers();
var grupKecamatan = {};
fetch('adminKecamatan.json')
.then(res => res.json())
.then(data => {
L.geoJSON(data, {
style: function () {
return { color: "#00FF00", weight: 2, opacity: 1, fillOpacity: 0.1 };
},
onEachFeature: function (feature, layer) {
var namaKec = feature.properties.Ket;
var popupHTML = `
<div class="popup-container">
<div class="popup-header" style="background: linear-gradient(135deg, #1e3a5f, #2563eb);">
<h4>${namaKec}</h4>
<span class="popup-type-badge">📍 Batas Kecamatan</span>
</div>
<div class="popup-body">
<div class="info-row">
<span class="info-label">Wilayah</span>
<span class="info-value">Kota Pontianak</span>
</div>
</div>
</div>`;
layer.bindPopup(popupHTML);
if (!grupKecamatan[namaKec]) grupKecamatan[namaKec] = L.featureGroup();
grupKecamatan[namaKec].addLayer(layer);
}
}).addTo(batasKotaLayer);
})
.catch(e => console.log('Gagal memuat adminKecamatan.json', e));
}
function loadSungai() {
sungaiLayer.clearLayers();
fetch('sungai.json')
.then(res => res.json())
.then(data => {
L.geoJSON(data, {
style: function () {
return { color: "#0ea5e9", weight: 2, opacity: 1, fillOpacity: 0.1 };
},
onEachFeature: function (feature, layer) {
var namaSung = feature.properties.Ket;
var popupHTML = `
<div class="popup-container">
<div class="popup-header" style="background: linear-gradient(135deg, #0c4a6e, #0ea5e9);">
<h4>${namaSung}</h4>
<span class="popup-type-badge">🌊 Sungai</span>
</div>
<div class="popup-body">
<div class="info-row">
<span class="info-label">Wilayah</span>
<span class="info-value">Kota Pontianak</span>
</div>
</div>
</div>`;
layer.bindPopup(popupHTML);
}
}).addTo(sungaiLayer);
})
.catch(e => console.log('Gagal memuat sungai.json', e));
}
*/
var databasePendudukMiskin = [];
function loadRumahIbadah() {
@@ -390,174 +318,7 @@ map.on('click', function () {
loadRumahIbadah();
// SPBU & draw-related globals removed
// ==========================================
// 4. EVENT SAAT MENGGAMBAR SELESAI
// ==========================================
/*
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType, layer = e.layer;
var geojson = layer.toGeoJSON();
koordinatSementara = JSON.stringify(geojson.geometry);
var popupContent = "";
if (type === 'polyline') {
var panjangMeter = turf.length(geojson, { units: 'meters' }).toFixed(2);
popupContent = `
<div class="popup-container">
<div class="popup-header" style="background: linear-gradient(135deg, #134e4a, #0f766e);">
<h4>Input Data Jalan</h4>
<span class="popup-type-badge">🛣️ Polyline Baru</span>
</div>
<div class="popup-body">
<form onsubmit="saveJalan(event)">
<input type="text" id="j_nama" placeholder="Nama Jalan" required>
<select id="j_status">
<option value="Jalan Nasional">Jalan Nasional</option>
<option value="Jalan Provinsi">Jalan Provinsi</option>
<option value="Jalan Kabupaten">Jalan Kabupaten</option>
</select>
<span class="info-label">Panjang Terukur</span>
<input type="text" id="j_panjang" value="${panjangMeter} m" readonly>
<button type="submit" class="btn btn-save" style="width:100%; margin-top:4px;">💾 Simpan Jalan</button>
</form>
</div>
</div>`;
} else if (type === 'polygon') {
var luasMeter = turf.area(geojson).toFixed(2);
popupContent = `
<div class="popup-container">
<div class="popup-header" style="background: linear-gradient(135deg, #4a1d96, #7c3aed);">
<h4>Input Data Parsil</h4>
<span class="popup-type-badge">🏘️ Polygon Baru</span>
</div>
<div class="popup-body">
<form onsubmit="saveParsil(event)">
<input type="text" id="p_nama" placeholder="Nama Pemilik" required>
<select id="p_status">
<option value="SHM">SHM (Hak Milik)</option>
<option value="HGB">HGB (Guna Bangunan)</option>
<option value="HGU">HGU (Guna Usaha)</option>
<option value="HP">HP (Hak Pakai)</option>
</select>
<span class="info-label">Luas Terukur</span>
<input type="text" id="p_luas" value="${luasMeter} m²" readonly>
<button type="submit" class="btn btn-save" style="width:100%; margin-top:4px;">💾 Simpan Parsil</button>
</form>
</div>
</div>`;
} else if (type === 'marker') {
tempLat = layer.getLatLng().lat;
tempLng = layer.getLatLng().lng;
popupContent = `
<div class="popup-container">
<div class="popup-header">
<h4>Tambah Titik Baru</h4>
<span class="popup-type-badge">📍 Marker Baru</span>
</div>
<div class="popup-body">
<select id="kategori_marker" onchange="toggleFormMarker()" style="margin-bottom:12px; border-color:#3b82f6;">
<option value="spbu">⛽ Stasiun SPBU</option>
<option value="rumah_ibadah">🕌 Rumah Ibadah</option>
<option value="penduduk">👥 Penduduk Miskin</option>
</select>
<form id="form_spbu" onsubmit="saveSPBU(event)">
<input type="text" id="new_nama" placeholder="Nama SPBU" required>
<input type="text" id="new_nohp" placeholder="No HP">
<select id="new_kategori">
<option value="Ya">Buka 24 Jam</option>
<option value="Tidak">Reguler</option>
</select>
<button type="submit" class="btn btn-save" style="width:100%;">💾 Simpan SPBU</button>
</form>
<form id="form_rumah_ibadah" onsubmit="saveRumahIbadah(event)" style="display:none;">
<input type="text" id="ri_nama" placeholder="Nama Rumah Ibadah" required>
<button type="submit" class="btn btn-save" style="width:100%;">💾 Simpan Rumah Ibadah</button>
</form>
<form id="form_penduduk" onsubmit="savePenduduk(event)" style="display:none;">
<input type="text" id="pm_nama" placeholder="Nama Kepala Keluarga" required>
<button type="submit" class="btn btn-save" style="width:100%; background:#ef4444;">💾 Simpan Penduduk</button>
</form>
</div>
</div>`;
}
layer.bindPopup(popupContent).openPopup();
drawnItems.addLayer(layer);
});
*/
/*
// ==========================================
// 6. FUNGSI SIMPAN DATA
// ==========================================
function saveSPBU(e) {
e.preventDefault();
var formData = new FormData();
formData.append('nama_spbu', document.getElementById('new_nama').value);
formData.append('no_hp', document.getElementById('new_nohp').value);
formData.append('kategori', document.getElementById('new_kategori').value);
formData.append('latitude', tempLat);
formData.append('longitude', tempLng);
fetch('save.php', { method: 'POST', body: formData })
.then(r => r.text()).then(res => { alert(res); map.closePopup(); drawnItems.clearLayers(); loadSPBU(); })
.catch(error => console.error('Error:', error));
}
function saveJalan(e) {
e.preventDefault();
var formData = new FormData();
formData.append('nama_jalan', document.getElementById('j_nama').value);
formData.append('status', document.getElementById('j_status').value);
formData.append('panjang', document.getElementById('j_panjang').value);
formData.append('koordinat', koordinatSementara);
fetch('save_jalan.php', { method: 'POST', body: formData })
.then(r => r.text()).then(res => { alert(res); map.closePopup(); drawnItems.clearLayers(); loadJalan(); })
.catch(error => console.error('Error:', error));
}
function saveParsil(e) {
e.preventDefault();
var formData = new FormData();
formData.append('nama_pemilik', document.getElementById('p_nama').value);
formData.append('status', document.getElementById('p_status').value);
formData.append('luas', document.getElementById('p_luas').value);
formData.append('koordinat', koordinatSementara);
fetch('save_parsil.php', { method: 'POST', body: formData })
.then(r => r.text()).then(res => { alert(res); map.closePopup(); drawnItems.clearLayers(); loadParsil(); })
.catch(error => console.error('Error:', error));
}
function toggleFormMarker() {
var pilihan = document.getElementById('kategori_marker').value;
document.getElementById('form_spbu').style.display = pilihan === 'spbu' ? 'block' : 'none';
document.getElementById('form_rumah_ibadah').style.display = pilihan === 'rumah_ibadah' ? 'block' : 'none';
document.getElementById('form_penduduk').style.display = pilihan === 'penduduk' ? 'block' : 'none';
}
function saveRumahIbadah(e) {
e.preventDefault();
var formData = new FormData();
formData.append('nama', document.getElementById('ri_nama').value);
formData.append('latitude', tempLat);
formData.append('longitude', tempLng);
fetch('save_rumah_ibadah.php', { method: 'POST', body: formData })
.then(r => r.text()).then(res => { alert(res); map.closePopup(); drawnItems.clearLayers(); loadRumahIbadah(); })
.catch(error => console.error('Error:', error));
}
function savePenduduk(e) {
e.preventDefault();
var formData = new FormData();
formData.append('nama', document.getElementById('pm_nama').value);
formData.append('latitude', tempLat);
formData.append('longitude', tempLng);
fetch('save_penduduk_miskin.php', { method: 'POST', body: formData })
.then(r => r.text()).then(res => { alert(res); map.closePopup(); drawnItems.clearLayers(); loadRumahIbadah(); })
.catch(error => console.error('Error:', error));
}
*/
// ==========================================
// 7. HAPUS DATA
@@ -609,9 +370,12 @@ function formEditPenduduk(id, nama, alamat, statusBantuan, lat, lng) {
</div>
<div class="popup-body" style="padding:14px 16px;">
<form onsubmit="updateData(event, 'penduduk_miskin', '${id}')">
<input type="text" id="edit_nama_penduduk" value="${nama}" required>
<textarea id="edit_alamat_penduduk" rows="2" required>${alamat}</textarea>
<span class="info-label">NAMA KEPALA KELUARGA</span>
<input type="text" style="margin-bottom:12px; width:100%; padding:8px 10px; background-color:#0f172a; border:1px solid rgba(255,255,255,0.2); border-radius:6px; color:#f8fafc;" id="edit_nama_penduduk" value="${nama}" required>
<span class="info-label">ALAMAT LENGKAP</span>
<textarea id="edit_alamat_penduduk" style="margin-bottom:12px; width:100%; padding:8px 10px; background-color:#0f172a; border:1px solid rgba(255,255,255,0.2); border-radius:6px; color:#f8fafc;" rows="2" required>${alamat}</textarea>
<span class="info-label">STATUS BANTUAN</span>
<select id="edit_status_bantuan" style="margin-bottom:12px; width:100%; padding:8px 10px; background-color:#0f172a; border:1px solid rgba(255,255,255,0.2); border-radius:6px; color:#f8fafc; font-size:13px; cursor:pointer;">
<option value="Belum Menerima" style="background-color:#1e293b; color:#f8fafc;" ${statusBantuan === 'Belum Menerima' ? 'selected' : ''}>Belum Menerima</option>
<option value="Sudah Menerima" style="background-color:#1e293b; color:#f8fafc;" ${statusBantuan === 'Sudah Menerima' ? 'selected' : ''}>Sudah Menerima</option>
@@ -682,7 +446,8 @@ legend.onAdd = function (map) {
</div>
Rumah Ibadah
</div>
<div class="legend-item"><span class="legend-color" style="background:#ef4444; border-color:#dc2626; border-radius:50%; height:10px; width:10px; margin-left:2px;"></span> Penduduk Miskin</div>
<div class="legend-item"><span class="legend-color" style="background:#34d399; border-color:#34d399; border-radius:50%; height:10px; width:10px; margin-left:2px;"></span> Penduduk Miskin (Sudah Menerima)</div>
<div class="legend-item"><span class="legend-color" style="background:#ef4444; border-color:#dc2626; border-radius:50%; height:10px; width:10px; margin-left:2px;"></span> Penduduk Miskin (Belum Menerima)</div>
</div>`;
return div;
};
WebGISPovertyMap/style.css
+36 -2
View File
@@ -602,7 +602,7 @@ body {
.info-label {
font-weight: 600;
color: var(--text-muted);
color: var(--text-secondary);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.8px;
@@ -613,7 +613,7 @@ body {
.info-value {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
color: var(--text-muted);
}
/* Popup form inputs */
@@ -2183,6 +2183,7 @@ body {
border-color: rgba(16, 185, 129, 0.2);
background: rgba(16, 185, 129, 0.03);
}
.stat-card.stat-success .stat-num {
color: #10b981;
}
@@ -2191,6 +2192,7 @@ body {
border-color: rgba(239, 68, 68, 0.2);
background: rgba(239, 68, 68, 0.03);
}
.stat-card.stat-danger .stat-num {
color: #ef4444;
}
@@ -2315,6 +2317,7 @@ body {
.marker-cluster-small {
background-color: rgba(59, 130, 246, 0.4) !important;
}
.marker-cluster-small div {
background-color: rgba(37, 99, 235, 0.95) !important;
color: white !important;
@@ -2324,6 +2327,7 @@ body {
.marker-cluster-medium {
background-color: rgba(37, 99, 235, 0.4) !important;
}
.marker-cluster-medium div {
background-color: rgba(29, 78, 216, 0.95) !important;
color: white !important;
@@ -2333,6 +2337,7 @@ body {
.marker-cluster-large {
background-color: rgba(30, 58, 138, 0.4) !important;
}
.marker-cluster-large div {
background-color: rgba(30, 64, 175, 0.95) !important;
color: white !important;
@@ -2343,4 +2348,33 @@ body {
font-family: var(--font-mono) !important;
font-size: 12px !important;
box-shadow: 0 0 10px rgba(37, 99, 235, 0.5) !important;
}
/* Menghapus padding agar header hijau bisa mentok ke atas dan samping */
.leaflet-popup-content-wrapper {
padding: 0 !important;
border-radius: 12px !important;
overflow: hidden !important;
/* Agar sudut tetap melengkung walau header mentok */
background-color: #1e2130 !important;
/* Warna gelap utama body popup */
border: none !important;
}
/* Menghapus margin bawaan konten */
.leaflet-popup-content {
margin: 0 !important;
width: 280px !important;
/* Sesuaikan lebar popup */
}
/* Mengubah warna panah di bawah popup agar menyatu dengan body */
.leaflet-popup-tip {
background-color: #1e2130 !important;
}
/* Menyesuaikan tombol silang (close/x) bawaan Leaflet */
.leaflet-popup-close-button {
color: #ffffff !important;
padding: 4px 8px !important;
}