Radit_Arahman_Putra23/UasSIGWebgis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hapus gembok login agar bisa simpan data langsung

Browse Source
This commit is contained in:
raditarahman5-cloud
2026-06-13 01:07:22 +07:00
parent 1b44fc6a8f
commit f5043b13d7
5 changed files with 200 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
warga/script.js
+65 -65
View File
@@ -36,9 +36,9 @@ var currentRadius = 500;
var cachedData = null;
var drawControl = new L.Control.Draw({
draw: {
marker:false, circle:false, circlemarker:false,
polyline: { shapeOptions: { color: 'blue', weight: 4 } },
draw: {
marker: false, circle: false, circlemarker: false,
polyline: { shapeOptions: { color: 'blue', weight: 4 } },
polygon: { shapeOptions: { color: 'red' } },
rectangle: false
},
@@ -47,7 +47,7 @@ var drawControl = new L.Control.Draw({
map.addControl(drawControl);
// Locate Control
var locateBtn = L.control({position: 'topleft'});
var locateBtn = L.control({ position: 'topleft' });
locateBtn.onAdd = function (map) {
var div = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
div.style.backgroundColor = 'white';
@@ -59,13 +59,13 @@ locateBtn.onAdd = function (map) {
div.style.justifyContent = 'center';
div.innerHTML = '<i class="fas fa-crosshairs" style="font-size:1.2rem; color:#2563eb;"></i>';
div.title = "Lokasi Anda Saat Ini";
div.onclick = function(){ map.locate({setView: true, maxZoom: 16}); }
div.onclick = function () { map.locate({ setView: true, maxZoom: 16 }); }
return div;
};
locateBtn.addTo(map);
map.on('locationfound', function(e) {
L.circleMarker(e.latlng, {radius: 8, fillColor: '#3b82f6', color: '#fff', weight: 3, fillOpacity: 1}).addTo(map).bindPopup("Lokasi Anda").openPopup();
map.on('locationfound', function (e) {
L.circleMarker(e.latlng, { radius: 8, fillColor: '#3b82f6', color: '#fff', weight: 3, fillOpacity: 1 }).addTo(map).bindPopup("Lokasi Anda").openPopup();
});
// Event Draw
@@ -80,21 +80,21 @@ map.on(L.Draw.Event.CREATED, function (e) {
if (type === 'polyline') {
document.getElementById('jenis').value = 'jalan';
toggleForm();
var coords = layer.getLatLngs();
document.getElementById('jalan_coords').value = JSON.stringify(coords);
// Calculate Length automatically
var length = 0;
for (var i = 0; i < coords.length - 1; i++) {
length += coords[i].distanceTo(coords[i + 1]);
}
document.getElementById('panjang_jalan').value = length.toFixed(2);
} else if (type === 'polygon') {
document.getElementById('jenis').value = 'parsil';
toggleForm();
var coords = layer.getLatLngs()[0];
document.getElementById('parsil_coords').value = JSON.stringify(coords);
}
@@ -103,15 +103,15 @@ map.on(L.Draw.Event.CREATED, function (e) {
map.on(L.Draw.Event.EDITED, function (e) {
var layers = e.layers;
layers.eachLayer(function (layer) {
if(layer.db_id && layer.db_tipe) {
if (layer.db_id && layer.db_tipe) {
var coords = (layer.db_tipe === 'parsil') ? layer.getLatLngs()[0] : layer.getLatLngs();
var fd = new FormData();
fd.append('action', 'update_koordinat');
fd.append('id', layer.db_id);
fd.append('tipe', layer.db_tipe);
fd.append('koordinat', JSON.stringify(coords));
if(layer.db_tipe === 'jalan') {
if (layer.db_tipe === 'jalan') {
var length = 0;
for (var i = 0; i < coords.length - 1; i++) {
length += coords[i].distanceTo(coords[i + 1]);
@@ -121,13 +121,13 @@ map.on(L.Draw.Event.EDITED, function (e) {
fetch('../api/api.php', { method: 'POST', body: fd });
}
});
Swal.fire({icon: 'success', title: 'Tersimpan', text: 'Perubahan bentuk berhasil disimpan!', timer: 1500, showConfirmButton: false});
Swal.fire({ icon: 'success', title: 'Tersimpan', text: 'Perubahan bentuk berhasil disimpan!', timer: 1500, showConfirmButton: false });
});
map.on(L.Draw.Event.DELETED, function (e) {
var layers = e.layers;
layers.eachLayer(function (layer) {
if(layer.db_id && layer.db_tipe) {
if (layer.db_id && layer.db_tipe) {
var fd = new FormData();
fd.append('action', 'hapus_data');
fd.append('id', layer.db_id);
@@ -135,20 +135,20 @@ map.on(L.Draw.Event.DELETED, function (e) {
fetch('../api/api.php', { method: 'POST', body: fd });
}
});
Swal.fire({icon: 'success', title: 'Terhapus', text: 'Data berhasil dihapus dari peta!', timer: 1500, showConfirmButton: false});
Swal.fire({ icon: 'success', title: 'Terhapus', text: 'Data berhasil dihapus dari peta!', timer: 1500, showConfirmButton: false });
});
function toggleSidebar() { document.getElementById('sidebar').classList.toggle('active'); }
function toggleRightPanel() {
var panel = document.getElementById('panelInput');
if(panel) panel.classList.toggle('collapsed');
if (panel) panel.classList.toggle('collapsed');
}
function filterData() {
var input = document.getElementById('searchInput').value.toLowerCase();
var cards = document.getElementsByClassName('item-data');
if(input.length > 0) document.getElementById('sidebar').classList.add('active');
if (input.length > 0) document.getElementById('sidebar').classList.add('active');
for (var i = 0; i < cards.length; i++) {
cards[i].style.display = cards[i].getAttribute('data-nama').includes(input) ? "" : "none";
}
@@ -157,7 +157,7 @@ function filterData() {
function changeRadius(v) {
currentRadius = parseInt(v);
document.getElementById('radiusVal').innerText = v;
if(cachedData) renderMap(cachedData);
if (cachedData) renderMap(cachedData);
}
var prevReportCount = -1;
@@ -166,7 +166,7 @@ function loadData(isPolling = false) {
.then(r => r.json())
.then(data => {
cachedData = data;
// Logika Notifikasi Bubble
if (prevReportCount !== -1 && data.pelaporan.length > prevReportCount) {
var newCount = data.pelaporan.length - prevReportCount;
@@ -181,10 +181,10 @@ function loadData(isPolling = false) {
});
}
prevReportCount = data.pelaporan.length;
var badge = document.getElementById('notifBadge');
if(badge) {
if(data.pelaporan.length > 0) {
if (badge) {
if (data.pelaporan.length > 0) {
badge.style.display = 'block';
badge.innerText = data.pelaporan.length;
} else {
@@ -208,7 +208,7 @@ function loadData(isPolling = false) {
// Auto-poll every 10 seconds
setInterval(() => {
// Only poll if not currently editing (edit_id is 0)
if(document.getElementById('edit_id') && document.getElementById('edit_id').value === "0") {
if (document.getElementById('edit_id') && document.getElementById('edit_id').value === "0") {
loadData(true);
}
}, 10000);
@@ -238,12 +238,12 @@ function renderSidebar(data) {
if (!window.dashboardType || window.dashboardType === 'sosial' || window.dashboardType === 'admin') {
// Pelaporan
html += `<div class="section-title" style="color:#ef4444">🚨 Laporan Darurat</div>`;
if(data.pelaporan.length === 0) html += `<small style="color:#666">Belum ada laporan</small>`;
if (data.pelaporan.length === 0) html += `<small style="color:#666">Belum ada laporan</small>`;
data.pelaporan.forEach(p => {
html += `<div class="card item-data" data-nama="${p.nama_pelapor.toLowerCase()} ${p.isi_laporan.toLowerCase()}">
<div style="display:flex; justify-content:space-between">
<span onclick="fokus(${p.latitude}, ${p.longitude})" style="cursor:pointer">
<b>${p.nama_pelapor}</b><small><i class="far fa-clock"></i> ${p.waktu}</small><br><span>${p.isi_laporan.substring(0,40)}...</span>
<b>${p.nama_pelapor}</b><small><i class="far fa-clock"></i> ${p.waktu}</small><br><span>${p.isi_laporan.substring(0, 40)}...</span>
</span>
<div>
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-bottom:5px;" onclick="editData('pelaporan', ${p.id})">Edit</button><br>
@@ -313,9 +313,9 @@ function renderSidebar(data) {
html += `<div class="section-title">🛣️ Manajemen Jalan</div>`;
data.jalan.forEach(j => {
var color = '#ef4444'; // default red
if(j.status_jalan === 'Nasional') color = '#ef4444';
else if(j.status_jalan === 'Provinsi') color = '#eab308';
else if(j.status_jalan === 'Kabupaten') color = '#22c55e';
if (j.status_jalan === 'Nasional') color = '#ef4444';
else if (j.status_jalan === 'Provinsi') color = '#eab308';
else if (j.status_jalan === 'Kabupaten') color = '#22c55e';
html += `<div class="card item-data" data-nama="${j.nama_jalan.toLowerCase()}">
<div style="display:flex; justify-content:space-between">
<span>
@@ -373,10 +373,10 @@ function renderMap(data) {
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${m.id}, 'masjid')">Hapus</button>
</div>`;
var faClass = 'fa-mosque';
if(m.jenis === 'Gereja') faClass = 'fa-church';
else if(m.jenis === 'Vihara') faClass = 'fa-vihara';
else if(m.jenis === 'Pura') faClass = 'fa-torii-gate';
if (m.jenis === 'Gereja') faClass = 'fa-church';
else if (m.jenis === 'Vihara') faClass = 'fa-vihara';
else if (m.jenis === 'Pura') faClass = 'fa-torii-gate';
// Buat custom marker bentuk map pin dengan icon sesuai jenis
var masjidIcon = L.divIcon({
html: `
@@ -408,7 +408,7 @@ function renderMap(data) {
});
L.marker([m.latitude, m.longitude], { icon: masjidIcon, draggable: true }).addTo(layerMasjid).bindPopup(popup)
.on('dragend', function(e){ updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); });
.on('dragend', function (e) { updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); });
L.circle([m.latitude, m.longitude], {
radius: currentRadius, color: '#2563eb', fillOpacity: 0.1, weight: 1
}).addTo(layerMasjidRadius);
@@ -454,7 +454,7 @@ function renderMap(data) {
L.marker([p.latitude, p.longitude], {
icon: pelaporanIcon, draggable: true
}).addTo(layerPelaporan).bindPopup(popup)
.on('dragend', function(e){ updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); });
.on('dragend', function (e) { updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); });
});
}
@@ -464,7 +464,7 @@ function renderMap(data) {
var is24 = s.kategori === '24jam';
var iconUrl = is24 ? 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png' : 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';
var targetLayer = is24 ? layerSpbu24 : layerSpbuNon24;
var popup = `<b>⛽ ${s.nama}</b><br>Kategori: ${s.kategori === '24jam' ? 'Buka 24 Jam' : 'Tidak 24 Jam'}<br>
<div style="margin-top:10px; text-align:center;">
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('spbu', ${s.id})">Edit</button>
@@ -473,7 +473,7 @@ function renderMap(data) {
L.marker([s.latitude, s.longitude], {
icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }), draggable: true
}).addTo(targetLayer).bindPopup(popup)
.on('dragend', function(e){ updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); });
.on('dragend', function (e) { updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); });
});
}
@@ -482,7 +482,7 @@ function renderMap(data) {
data.warga.forEach(w => {
var pos = L.latLng(w.latitude, w.longitude);
var isCovered = lokMasjid.some(m => pos.distanceTo(m) <= currentRadius);
// Buat elemen point berbentuk map pin (teardrop) dengan ikon rumah di dalamnya
var color = isCovered ? '#16a34a' : '#ef4444'; // Hijau aman, merah di luar
var houseIcon = L.divIcon({
@@ -521,7 +521,7 @@ function renderMap(data) {
iconAnchor: [15, 36], // Titik jangkar di ujung bawah pin
popupAnchor: [0, -36]
});
var isPenerima = (w.status_bantuan === 'Sudah') ? 'Ya' : 'Belum';
var txtPendidikan = w.pendidikan ? w.pendidikan : 'Tidak diketahui';
var txtPenyakit = (w.riwayat_penyakit && w.riwayat_penyakit.trim().length > 0) ? w.riwayat_penyakit : 'Tidak ada';
@@ -546,8 +546,8 @@ function renderMap(data) {
</div>
</div>`;
L.marker(pos, { icon: houseIcon, draggable: true })
.addTo(layerWarga).bindPopup(popup)
.on('dragend', function(e){ updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); });
.addTo(layerWarga).bindPopup(popup)
.on('dragend', function (e) { updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); });
});
}
@@ -556,16 +556,16 @@ function renderMap(data) {
data.jalan.forEach(j => {
var coords = JSON.parse(j.koordinat);
var color = '#ef4444'; // default red
if(j.status_jalan === 'Nasional') color = '#ef4444'; // Merah
else if(j.status_jalan === 'Provinsi') color = '#eab308'; // Kuning
else if(j.status_jalan === 'Kabupaten') color = '#22c55e'; // Hijau
if (j.status_jalan === 'Nasional') color = '#ef4444'; // Merah
else if (j.status_jalan === 'Provinsi') color = '#eab308'; // Kuning
else if (j.status_jalan === 'Kabupaten') color = '#22c55e'; // Hijau
var popup = `<b>🛣️ ${j.nama_jalan}</b><br>Status: ${j.status_jalan}<br>Panjang: ${j.panjang_m} meter<br>
<div style="margin-top:10px; text-align:center;">
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('jalan', ${j.id})">Edit</button>
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${j.id}, 'jalan')">Hapus</button>
</div>`;
var polyline = L.polyline(coords, {color: color, weight: 6}).addTo(layerLines).bindPopup(popup);
var polyline = L.polyline(coords, { color: color, weight: 6 }).addTo(layerLines).bindPopup(popup);
polyline.db_id = j.id;
polyline.db_tipe = 'jalan';
drawnItems.addLayer(polyline);
@@ -579,7 +579,7 @@ function renderMap(data) {
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('parsil', ${p.id})">Edit</button>
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${p.id}, 'parsil')">Hapus</button>
</div>`;
var polygon = L.polygon(coords, {color: '#2563eb', fillOpacity: 0.4}).addTo(layerPolygons).bindPopup(popup);
var polygon = L.polygon(coords, { color: '#2563eb', fillOpacity: 0.4 }).addTo(layerPolygons).bindPopup(popup);
polygon.db_id = p.id;
polygon.db_tipe = 'parsil';
drawnItems.addLayer(polygon);
@@ -622,12 +622,12 @@ function simpanData() {
fd.append('status_hak', document.getElementById('status_hak').value);
fd.append('koordinat', document.getElementById('parsil_coords').value);
} else {
if(j !== 'geometri' && (!lat || !lng) && document.getElementById('edit_id').value === "0") {
Swal.fire({icon: 'warning', title: 'Oops...', text: 'Silakan klik titik koordinat di peta terlebih dahulu!'});
return;
if (j !== 'geometri' && (!lat || !lng) && document.getElementById('edit_id').value === "0") {
Swal.fire({ icon: 'warning', title: 'Oops...', text: 'Silakan klik titik koordinat di peta terlebih dahulu!' });
return;
}
fd.append('lat', lat); fd.append('lng', lng);
if (j === 'pelaporan') {
fd.append('nama', document.getElementById('nama_pelapor').value);
fd.append('laporan', document.getElementById('isi_laporan').value);
@@ -651,15 +651,15 @@ function simpanData() {
}
}
Swal.fire({ title: 'Menyimpan...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() }});
Swal.fire({ title: 'Menyimpan...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() } });
fetch('../api/api.php', { method: 'POST', body: fd })
.then(res => res.json())
.then((res) => {
if (res.status === 'error') {
Swal.fire('Gagal!', res.message, 'error');
} else {
Swal.fire({icon: 'success', title: 'Berhasil', text: 'Data berhasil disimpan!', timer: 1500, showConfirmButton: false})
.then(() => location.reload());
Swal.fire({ icon: 'success', title: 'Berhasil', text: 'Data berhasil disimpan!', timer: 1500, showConfirmButton: false })
.then(() => location.reload());
}
});
}
@@ -670,7 +670,7 @@ function hapusData(id, tipe) {
showCancelButton: true, confirmButtonColor: '#ef4444', cancelButtonColor: '#94a3b8', confirmButtonText: 'Ya, Hapus!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() }});
Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() } });
var fd = new FormData();
fd.append('action', 'hapus_data');
fd.append('id', id);
@@ -700,16 +700,16 @@ function batalEdit() {
function editData(tipe, id) {
var item = cachedData[tipe].find(x => x.id == id);
if(!item) return;
if (!item) return;
document.getElementById('edit_id').value = id;
document.getElementById('jenis').value = tipe;
toggleForm();
var panel = document.getElementById('panelInput');
if(panel) panel.classList.remove('collapsed');
if(tipe == 'warga') {
var panel = document.getElementById('panelInput');
if (panel) panel.classList.remove('collapsed');
if (tipe == 'warga') {
document.getElementById('nama_kk').value = item.nama;
document.getElementById('jumlah_kk').value = item.jumlah_kk;
document.getElementById('tanggal_lahir').value = item.tanggal_lahir || '';
@@ -739,7 +739,7 @@ function editData(tipe, id) {
document.getElementById('parsil_coords').value = item.koordinat;
}
if(item.latitude && item.longitude) {
if (item.latitude && item.longitude) {
document.getElementById('lat').value = item.latitude;
document.getElementById('lng').value = item.longitude;
fokus(item.latitude, item.longitude);
@@ -762,10 +762,10 @@ function updateMarkerCoord(id, tipe, latlng) {
fetch('../api/api.php', { method: 'POST', body: fd })
.then(() => {
Swal.fire({
icon: 'success',
title: 'Tersimpan',
text: 'Posisi titik berhasil digeser!',
timer: 1500,
icon: 'success',
title: 'Tersimpan',
text: 'Posisi titik berhasil digeser!',
timer: 1500,
showConfirmButton: false,
toast: true,
position: 'top-end'