fix: real-time reverse geocoding on drag, copy missing backend scripts to publik, update right sidebar card UI
This commit is contained in:
+83
-67
@@ -1211,23 +1211,22 @@ body {
|
||||
background: rgba(225,29,72,0.45);
|
||||
}
|
||||
|
||||
/* ─── DATA CARD (Ultra Compact) ─── */
|
||||
/* ─── DATA CARD (Premium Modern) ─── */
|
||||
.data-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
border-radius: 8px;
|
||||
padding: 6px 8px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1),
|
||||
background-color 0.2s ease;
|
||||
transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,255,255,0.6);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -1235,53 +1234,61 @@ body {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; top: 0; bottom: 0;
|
||||
width: 3px;
|
||||
width: 5px;
|
||||
background: linear-gradient(180deg, var(--accent), #fb7185);
|
||||
border-radius: 3px 0 0 3px;
|
||||
border-radius: 16px 0 0 16px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
transform: scaleY(0);
|
||||
transform-origin: center;
|
||||
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.data-card:hover {
|
||||
transform: translateY(-2px) scale(1.005);
|
||||
border-color: rgba(225, 29, 72, 0.25);
|
||||
box-shadow: 0 8px 24px rgba(225, 29, 72, 0.08), 0 2px 6px rgba(0,0,0,0.03);
|
||||
background: #fafaf9;
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(225, 29, 72, 0.4);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 12px 30px rgba(225, 29, 72, 0.12), 0 4px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.data-card:hover::before {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.data-card:active {
|
||||
transform: translateY(0px) scale(0.98);
|
||||
box-shadow: 0 2px 8px rgba(225, 29, 72, 0.05);
|
||||
transform: translateY(1px) scale(0.98);
|
||||
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.08);
|
||||
}
|
||||
|
||||
.data-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.data-card-icon-wrap {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.dc-icon-spbu { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
|
||||
.dc-icon-pm { background: linear-gradient(135deg, #ffe4e6, #fecdd3); }
|
||||
.dc-icon-fp { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
|
||||
.dc-icon-jalan { background: linear-gradient(135deg, #fef9c3, #fef08a); }
|
||||
.dc-icon-poly { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); }
|
||||
.dc-icon-geo { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
|
||||
.data-card:hover .data-card-icon-wrap {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
|
||||
.dc-icon-spbu { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; }
|
||||
.dc-icon-pm { background: linear-gradient(135deg, #ffe4e6, #fecdd3); color: #991b1b; }
|
||||
.dc-icon-fp { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
|
||||
.dc-icon-jalan { background: linear-gradient(135deg, #fef9c3, #fef08a); color: #854d0e; }
|
||||
.dc-icon-poly { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #6b21a8; }
|
||||
.dc-icon-geo { background: linear-gradient(135deg, #e0f2fe, #bae6fd); color: #075985; }
|
||||
|
||||
.data-card-body {
|
||||
flex: 1;
|
||||
@@ -1292,69 +1299,78 @@ body {
|
||||
}
|
||||
|
||||
.data-card-name {
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
line-height: 1.2;
|
||||
font-size: 14.5px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 2px;
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
.data-card-sub {
|
||||
font-size: 10.5px;
|
||||
color: var(--sidebar-text-muted);
|
||||
font-size: 11.5px;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
margin-top: 1px;
|
||||
margin-top: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.data-card-badge {
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
padding: 2px 6px;
|
||||
border-radius: 99px;
|
||||
letter-spacing: 0.3px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-start;
|
||||
margin-top: 2px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.badge-24jam { background: #dcfce7; color: #166534; }
|
||||
.badge-tidak24 { background: #fee2e2; color: #991b1b; }
|
||||
.badge-dalam-jk { background: #dcfce7; color: #166534; }
|
||||
.badge-luar-jk { background: #fee2e2; color: #991b1b; }
|
||||
.badge-shm { background: #dcfce7; color: #166534; }
|
||||
.badge-hgb { background: #dbeafe; color: #1e40af; }
|
||||
.badge-hgu { background: #fef9c3; color: #854d0e; }
|
||||
.badge-hp { background: #f3e8ff; color: #6b21a8; }
|
||||
.badge-geo { background: #f1f5f9; color: #475569; }
|
||||
.badge-24jam { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0;}
|
||||
.badge-tidak24 { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca;}
|
||||
.badge-dalam-jk { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0;}
|
||||
.badge-luar-jk { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca;}
|
||||
.badge-shm { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0;}
|
||||
.badge-hgb { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe;}
|
||||
.badge-hgu { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a;}
|
||||
.badge-hp { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff;}
|
||||
.badge-geo { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;}
|
||||
|
||||
.data-card-coords {
|
||||
font-size: 9.5px;
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
opacity: 0.8;
|
||||
padding-left: 0;
|
||||
margin-top: 2px;
|
||||
gap: 6px;
|
||||
background: #f8fafc;
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
margin-top: 6px;
|
||||
align-self: flex-start;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.data-card:hover .data-card-coords {
|
||||
background: #f1f5f9;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.data-card-footer {
|
||||
margin-top: 4px;
|
||||
padding-top: 4px;
|
||||
border-top: 1px dashed rgba(0,0,0,0.06);
|
||||
margin-top: 8px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(0,0,0,0.04);
|
||||
width: 100%;
|
||||
}
|
||||
.data-card-footer span, .data-card-footer span[class^="badge-"] {
|
||||
font-size: 9.5px !important;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
/* Tab System for Modul Utuh */
|
||||
|
||||
+28
-8
@@ -763,19 +763,27 @@ Promise.all([
|
||||
------------------------------------------------------- */
|
||||
|
||||
function reverseGeocode(lat, lng) {
|
||||
el('fp_alamat').value = '';
|
||||
el('geocodeStatus').textContent = '\u23F3 Mencari alamat...';
|
||||
if (el('fp_alamat')) el('fp_alamat').value = '';
|
||||
if (el('pm_alamat')) el('pm_alamat').value = '';
|
||||
|
||||
const statusEl = el('geocodeStatus');
|
||||
if (statusEl) statusEl.textContent = '\u23F3 Mencari alamat...';
|
||||
|
||||
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&accept-language=id`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
el('fp_alamat').value = data.display_name || 'Alamat tidak ditemukan';
|
||||
el('geocodeStatus').textContent = '\u2713';
|
||||
setTimeout(() => { el('geocodeStatus').textContent = ''; }, 2000);
|
||||
const alamat = data.display_name || 'Alamat tidak ditemukan';
|
||||
if (el('fp_alamat')) el('fp_alamat').value = alamat;
|
||||
if (el('pm_alamat')) el('pm_alamat').value = alamat;
|
||||
if (statusEl) {
|
||||
statusEl.textContent = '\u2713';
|
||||
setTimeout(() => { statusEl.textContent = ''; }, 2000);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
el('fp_alamat').value = 'Gagal mengambil alamat';
|
||||
el('geocodeStatus').textContent = '\u2715';
|
||||
if (el('fp_alamat')) el('fp_alamat').value = 'Gagal mengambil alamat';
|
||||
if (el('pm_alamat')) el('pm_alamat').value = 'Gagal mengambil alamat';
|
||||
if (statusEl) statusEl.textContent = '\u2715';
|
||||
});
|
||||
}
|
||||
|
||||
@@ -840,6 +848,7 @@ map.on('click', e => {
|
||||
previewMarker = L.marker(e.latlng, {
|
||||
icon: createPendudukIcon(cek.status === 'Dalam Jangkauan')
|
||||
}).addTo(map);
|
||||
reverseGeocode(lat, lng);
|
||||
showModal('pendudukModal');
|
||||
return;
|
||||
}
|
||||
@@ -1317,7 +1326,7 @@ window.hapusData = function (tipe, id, pesan) {
|
||||
/* -------------------------------------------------------
|
||||
GLOBAL: UPDATE LOKASI DARI DRAG MARKER
|
||||
------------------------------------------------------- */
|
||||
window.updateLocation = function(tipe, id, lat, lng, nama) {
|
||||
window.updateLocation = async function(tipe, id, lat, lng, nama) {
|
||||
const urlMap = {
|
||||
point: 'point/update_lokasi.php',
|
||||
penduduk_miskin: 'penduduk_miskin/update_lokasi.php'
|
||||
@@ -1332,6 +1341,17 @@ window.updateLocation = function(tipe, id, lat, lng, nama) {
|
||||
const cek = cekJangkauan(lat, lng);
|
||||
fd.append('status_jangkauan', cek.status);
|
||||
fd.append('fasilitas_publik_id', cek.id || '');
|
||||
|
||||
// Ambil alamat baru
|
||||
try {
|
||||
const r = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&accept-language=id`);
|
||||
const data = await r.json();
|
||||
if (data && data.display_name) {
|
||||
fd.append('alamat', data.display_name);
|
||||
}
|
||||
} catch(e) {
|
||||
console.warn("Gagal mendapatkan alamat saat drag");
|
||||
}
|
||||
}
|
||||
|
||||
postData(urlMap[tipe], fd).then(res => {
|
||||
|
||||
Reference in New Issue
Block a user