feat: add database dump, backup script, dashboard and address feature

This commit is contained in:
noooviiieee
2026-06-13 18:17:19 +07:00
parent ada87b49d0
commit fa8b6a4ea9
9 changed files with 1193 additions and 8 deletions
+86 -4
View File
@@ -54,6 +54,7 @@
box-shadow: 0 1px 16px rgba(15,23,42,0.08);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
.nav-brand {
@@ -75,6 +76,23 @@
color: var(--navy);
letter-spacing: -0.3px;
}
.nav-link {
text-decoration: none;
font-size: 13px;
font-weight: 700;
color: var(--blue);
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 8px;
transition: all 0.2s;
background: var(--blue-l);
}
.nav-link:hover {
background: var(--blue);
color: white;
}
/* ── MAP ── */
#map {
@@ -382,6 +400,12 @@
</div>
<div class="nav-brand-text">WebGIS SPBU & Parsil Tanah</div>
</a>
<a href="dashboard.php" class="nav-link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><rect x="7" y="7" width="3" height="9"></rect><rect x="14" y="7" width="3" height="5"></rect>
</svg>
Dashboard Data
</a>
</nav>
<div id="map"></div>
@@ -572,6 +596,10 @@
<label>No. Whatsapp</label>
<input type="text" id="no_wa" placeholder="Contoh: 0812..." required>
</div>
<div class="ff">
<label>Alamat Lengkap</label>
<input type="text" id="alamat_lengkap" placeholder="Masukkan alamat lengkap" required>
</div>
<div class="ff" style="margin-bottom:0;">
<label>Buka 24 Jam?</label>
<select id="buka_24jam">
@@ -596,10 +624,12 @@
let pengelola = document.getElementById('nama_pengelola').value;
let wa = document.getElementById('no_wa').value;
let jam = document.getElementById('buka_24jam').value;
if (!nama || !pengelola || !wa || jam === "") { alert("Harap isi semua data termasuk status 24 jam!"); return; }
let alamat = document.getElementById('alamat_lengkap').value;
if (!nama || !pengelola || !wa || !alamat || jam === "") { alert("Harap isi semua data!"); return; }
let fd = new FormData();
fd.append('nama_spbu', nama); fd.append('nama_pengelola', pengelola); fd.append('no_wa', wa);
fd.append('alamat_lengkap', alamat);
fd.append('buka_24jam', jam); fd.append('lat', tempLatLng.lat); fd.append('lng', tempLatLng.lng);
let btn = document.querySelector('.btn-sv.g');
@@ -631,12 +661,19 @@
<div class="lp-su">Kontak: ${spbu.no_wa}</div>
</div>
<div class="lp-bd">
Alamat: ${spbu.alamat_lengkap || '-'}<br>
Status: <b>${is24 ? '<span style="color:#10B981;">Buka 24 Jam</span>' : '<span style="color:#EF4444;">Tutup Malam</span>'}</b><br>
<i style="font-size:10px; color:#94A3B8; display:block; margin-top:8px;">Geser pin untuk mengubah lokasi koordinat.</i>
</div>
<div class="lp-btns" style="display:flex; gap:6px;">
<button class="btn-sv w" onclick="bukaFormEdit(${spbu.id})">Edit</button>
<button class="btn-sv r" onclick="hapusSPBU(${spbu.id})">Hapus</button>
<div class="lp-btns" style="display:flex; flex-direction: column; gap:6px;">
<button class="btn-sv b" onclick="window.open('https://www.google.com/maps/dir/?api=1&destination=${spbu.lat},${spbu.lng}', '_blank')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"></polygon></svg>
Rute ke SPBU
</button>
<div style="display:flex; gap:6px;">
<button class="btn-sv w" onclick="bukaFormEdit(${spbu.id})">Edit</button>
<button class="btn-sv r" onclick="hapusSPBU(${spbu.id})">Hapus</button>
</div>
</div>
</div>
@@ -657,6 +694,10 @@
<label>No. Whatsapp</label>
<input type="text" id="edit_wa_${spbu.id}" value="${spbu.no_wa}">
</div>
<div class="ff">
<label>Alamat Lengkap</label>
<input type="text" id="edit_alamat_${spbu.id}" value="${spbu.alamat_lengkap || ''}">
</div>
<div class="ff" style="margin-bottom:0;">
<label>Buka 24 Jam?</label>
<select id="edit_jam_${spbu.id}">
@@ -701,6 +742,7 @@
fd.append('nama_spbu', document.getElementById(`edit_nama_${id}`).value);
fd.append('nama_pengelola', document.getElementById(`edit_pengelola_${id}`).value);
fd.append('no_wa', document.getElementById(`edit_wa_${id}`).value);
fd.append('alamat_lengkap', document.getElementById(`edit_alamat_${id}`).value);
fd.append('buka_24jam', document.getElementById(`edit_jam_${id}`).value);
fetch('update.php', { method: 'POST', body: fd })
@@ -1105,6 +1147,46 @@
muatDataSPBU();
muatDataJalan();
muatDataKavling();
// ============================================================
// FOCUS PETA DARI URL PARAMETERS
// ============================================================
window.addEventListener('load', function() {
const urlParams = new URLSearchParams(window.location.search);
const focusLat = urlParams.get('lat');
const focusLng = urlParams.get('lng');
const focusZoom = urlParams.get('zoom') || 17;
if (focusLat && focusLng) {
let lat = parseFloat(focusLat);
let lng = parseFloat(focusLng);
map.setView([lat, lng], parseInt(focusZoom));
// Tambahkan marker sementara untuk menyorot lokasi
let highlight = L.circleMarker([lat, lng], {
radius: 30,
color: '#F59E0B',
fillColor: '#FCD34D',
fillOpacity: 0.4,
weight: 2
}).addTo(map);
// Animate pulse
let size = 30;
let growing = true;
let pulseInterval = setInterval(() => {
if (growing) { size += 1; if(size >= 40) growing = false; }
else { size -= 1; if(size <= 30) growing = true; }
highlight.setRadius(size);
}, 50);
// Hapus marker highlight setelah 5 detik
setTimeout(() => {
clearInterval(pulseInterval);
map.removeLayer(highlight);
}, 5000);
}
});
</script>
</body>