Deploy WebGIS 01-05 dengan Docker
This commit is contained in:
@@ -0,0 +1,354 @@
|
||||
/* ============================================================
|
||||
style.css — WebGIS SPBU
|
||||
Tampilan sederhana, bersih, dan fungsional
|
||||
============================================================ */
|
||||
|
||||
/* ── Import Google Fonts ──────────────────────────────────── */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
|
||||
|
||||
/* ── CSS Variables (tema warna) ───────────────────────────── */
|
||||
:root {
|
||||
--primary: #1a56db;
|
||||
--primary-dk: #1341b0;
|
||||
--danger: #e02424;
|
||||
--danger-dk: #b91c1c;
|
||||
--success: #057a55;
|
||||
--bg: #f0f4f8;
|
||||
--panel: #ffffff;
|
||||
--border: #d1d9e0;
|
||||
--text: #1a202c;
|
||||
--text-muted: #6b7280;
|
||||
--shadow: 0 4px 24px rgba(0,0,0,0.10);
|
||||
--radius: 10px;
|
||||
--font: 'Plus Jakarta Sans', sans-serif;
|
||||
}
|
||||
|
||||
/* ── Reset & Base ─────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
height: 100%; /* ← pastikan ada height: 100% */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────────────── */
|
||||
header {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
padding: 0 24px;
|
||||
height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 10px rgba(26,86,219,0.35);
|
||||
z-index: 1000;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
header h1 .icon { font-size: 1.3rem; }
|
||||
|
||||
.header-hint {
|
||||
font-size: 0.78rem;
|
||||
background: rgba(255,255,255,0.18);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
border-radius: 20px;
|
||||
padding: 4px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* ── Map Container ────────────────────────────────────────── */
|
||||
#map {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 0; /* ← TAMBAHKAN BARIS INI */
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
/* ── Legend ───────────────────────────────────────────────── */
|
||||
.legend {
|
||||
background: var(--panel);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px 14px;
|
||||
box-shadow: var(--shadow);
|
||||
font-size: 0.78rem;
|
||||
min-width: 170px;
|
||||
}
|
||||
|
||||
.legend h4 {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 5px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.dot-orange { background: #f97316; }
|
||||
.dot-green { background: #22c55e; }
|
||||
.dot-red { background: #ef4444; }
|
||||
.dot-blue { background: #3b82f6; }
|
||||
.dot-black { background: #1f2937; }
|
||||
|
||||
/* ── Leaflet Popup Overrides ─────────────────────────────── */
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: var(--radius) !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow) !important;
|
||||
border: 1px solid var(--border);
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 0 !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-tip-container { margin-top: -1px; }
|
||||
|
||||
/* ── Popup: Header ────────────────────────────────────────── */
|
||||
.popup-header {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
padding: 12px 16px;
|
||||
font-weight: 700;
|
||||
font-size: 0.92rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ── Popup: Body ──────────────────────────────────────────── */
|
||||
.popup-body {
|
||||
padding: 14px 16px;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
/* ── Popup: Info Table (detail view) ─────────────────────── */
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.83rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-table tr td {
|
||||
padding: 5px 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.info-table tr td:first-child {
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
width: 110px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-table tr td:last-child {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ── Badge status ─────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.badge-ramai { background: #fef3c7; color: #92400e; }
|
||||
.badge-tidakramai{ background: #ecfdf5; color: #065f46; }
|
||||
.badge-ya { background: #eff6ff; color: #1e40af; }
|
||||
.badge-tidak { background: #f9fafb; color: #374151; }
|
||||
.badge-buka { background: #d1fae5; color: #065f46; }
|
||||
.badge-tutup { background: #fee2e2; color: #991b1b; }
|
||||
|
||||
/* ── Form Controls ────────────────────────────────────────── */
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.79rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 7px;
|
||||
font-family: var(--font);
|
||||
font-size: 0.85rem;
|
||||
color: var(--text);
|
||||
background: #f8fafc;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(26,86,219,0.12);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* ── Buttons ──────────────────────────────────────────────── */
|
||||
.btn-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
font-family: var(--font);
|
||||
font-size: 0.83rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.btn:active { transform: scale(0.97); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:hover { background: var(--primary-dk); }
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-danger:hover { background: var(--danger-dk); }
|
||||
|
||||
.btn-secondary {
|
||||
background: #f1f5f9;
|
||||
color: var(--text);
|
||||
border: 1.5px solid var(--border);
|
||||
}
|
||||
.btn-secondary:hover { background: #e2e8f0; }
|
||||
|
||||
.btn-success {
|
||||
background: var(--success);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-success:hover { background: #046c4e; }
|
||||
|
||||
/* ── Divider ──────────────────────────────────────────────── */
|
||||
.divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* ── Toast Notification ───────────────────────────────────── */
|
||||
#toast {
|
||||
position: fixed;
|
||||
bottom: 28px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(80px);
|
||||
background: #1f2937;
|
||||
color: #fff;
|
||||
padding: 10px 22px;
|
||||
border-radius: 30px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
#toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
#toast.toast-success { background: #057a55; }
|
||||
#toast.toast-error { background: #e02424; }
|
||||
|
||||
/* ── Loading Overlay ──────────────────────────────────────── */
|
||||
#loading {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(255,255,255,0.55);
|
||||
z-index: 8000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#loading.show { display: flex; }
|
||||
|
||||
.spinner {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 4px solid var(--border);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* ── Koordinat display ────────────────────────────────────── */
|
||||
.coord-display {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 7px;
|
||||
padding: 7px 10px;
|
||||
font-size: 0.78rem;
|
||||
color: #0369a1;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
.coord-display span { font-weight: 600; }
|
||||
@@ -0,0 +1,590 @@
|
||||
/**
|
||||
* script.js — WebGIS SPBU
|
||||
* File ini berisi seluruh logika JavaScript:
|
||||
* - Inisialisasi peta Leaflet
|
||||
* - Klik peta → popup form tambah data
|
||||
* - Ambil data dari database & tampilkan marker
|
||||
* - Tambah, edit, hapus data via AJAX/fetch
|
||||
* - Warna marker sesuai kondisi SPBU
|
||||
*/
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
1. VARIABEL GLOBAL
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
// Objek yang menyimpan semua marker di peta, dengan key = id SPBU
|
||||
const markersMap = {};
|
||||
|
||||
// Referensi popup sementara saat user klik peta (sebelum data disimpan)
|
||||
let tempPopup = null;
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
2. INISIALISASI PETA LEAFLET
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
// Buat instance peta, pusatkan ke Informatika
|
||||
const informatikaUntan = [-0.05566422376778593, 109.34854622732368];
|
||||
const map = L.map('map').setView(informatikaUntan, 17);
|
||||
|
||||
// Tambahkan tile layer OpenStreetMap
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
3. LEGEND PETA
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
const legend = L.control({ position: 'bottomright' });
|
||||
legend.onAdd = function () {
|
||||
const div = L.DomUtil.create('div', 'legend');
|
||||
div.innerHTML = `
|
||||
<h4>🗺️ Keterangan Marker</h4>
|
||||
<div class="legend-item"><div class="legend-dot dot-orange"></div><span>Ramai · 24 Jam · Buka</span></div>
|
||||
<div class="legend-item"><div class="legend-dot dot-green"></div><span>Tidak Ramai · 24 Jam · Buka</span></div>
|
||||
<div class="legend-item"><div class="legend-dot dot-red"></div><span>Ramai · Tidak 24 Jam · Buka</span></div>
|
||||
<div class="legend-item"><div class="legend-dot dot-blue"></div><span>Tidak Ramai · Tidak 24 Jam · Buka</span></div>
|
||||
<div class="legend-item"><div class="legend-dot dot-black"></div><span>Tutup (apapun kondisinya)</span></div>
|
||||
`;
|
||||
return div;
|
||||
};
|
||||
legend.addTo(map);
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
4. FUNGSI UTILITAS
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
/**
|
||||
* Tampilkan toast notification.
|
||||
* @param {string} pesan - Teks yang ditampilkan
|
||||
* @param {string} tipe - 'success' | 'error'
|
||||
*/
|
||||
function tampilkanToast(pesan, tipe = 'success') {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.textContent = pesan;
|
||||
toast.className = `show toast-${tipe}`;
|
||||
setTimeout(() => { toast.className = ''; }, 3000);
|
||||
}
|
||||
|
||||
/** Tampilkan loading spinner */
|
||||
function showLoading() {
|
||||
document.getElementById('loading').classList.add('show');
|
||||
}
|
||||
|
||||
/** Sembunyikan loading spinner */
|
||||
function hideLoading() {
|
||||
document.getElementById('loading').classList.remove('show');
|
||||
}
|
||||
|
||||
/**
|
||||
* Tentukan warna marker berdasarkan kondisi SPBU.
|
||||
* Aturan:
|
||||
* - tutup → hitam
|
||||
* - ramai + 24jam + buka → orange
|
||||
* - tidak_ramai + 24jam + buka → hijau
|
||||
* - ramai + tidak 24jam + buka → merah
|
||||
* - tidak_ramai + tidak 24jam + buka → biru
|
||||
*/
|
||||
function getWarnaMarker(spbu) {
|
||||
if (spbu.status_operasional === 'tutup') return 'black';
|
||||
if (spbu.status_ramai === 'ramai' && spbu.buka_24_jam === 'ya') return 'orange';
|
||||
if (spbu.status_ramai === 'tidak_ramai' && spbu.buka_24_jam === 'ya') return 'green';
|
||||
if (spbu.status_ramai === 'ramai' && spbu.buka_24_jam === 'tidak') return 'red';
|
||||
if (spbu.status_ramai === 'tidak_ramai' && spbu.buka_24_jam === 'tidak') return 'blue';
|
||||
return 'gray'; // fallback
|
||||
}
|
||||
|
||||
/**
|
||||
* Buat ikon marker berwarna menggunakan SVG inline.
|
||||
* @param {string} warna - Nama warna CSS
|
||||
*/
|
||||
function buatIkon(warna) {
|
||||
// Palet warna hex
|
||||
const palet = {
|
||||
orange: '#f97316', green: '#22c55e', red: '#ef4444',
|
||||
blue: '#3b82f6', black: '#1f2937', gray: '#9ca3af'
|
||||
};
|
||||
const hex = palet[warna] || '#9ca3af';
|
||||
|
||||
// SVG pin marker
|
||||
const svg = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36" width="28" height="42">
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24C24 5.373 18.627 0 12 0z"
|
||||
fill="${hex}" stroke="#fff" stroke-width="1.5"/>
|
||||
<circle cx="12" cy="12" r="5" fill="#fff" opacity="0.9"/>
|
||||
</svg>`;
|
||||
|
||||
return L.divIcon({
|
||||
html: svg,
|
||||
className: '', // Hapus class default Leaflet
|
||||
iconSize: [28, 42],
|
||||
iconAnchor: [14, 42], // Titik anchor di ujung bawah pin
|
||||
popupAnchor: [0, -42], // Popup muncul di atas marker
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Format label yang lebih ramah untuk ditampilkan.
|
||||
*/
|
||||
function labelRamai(val) { return val === 'ramai' ? 'Ramai' : 'Tidak Ramai'; }
|
||||
function labelBuka24(val) { return val === 'ya' ? 'Ya' : 'Tidak'; }
|
||||
function labelOperasional(val) { return val === 'buka' ? 'Buka' : 'Tutup'; }
|
||||
|
||||
function badgeRamai(val) {
|
||||
return val === 'ramai'
|
||||
? `<span class="badge badge-ramai">Ramai</span>`
|
||||
: `<span class="badge badge-tidakramai">Tidak Ramai</span>`;
|
||||
}
|
||||
function badgeBuka24(val) {
|
||||
return val === 'ya'
|
||||
? `<span class="badge badge-ya">Ya (24 Jam)</span>`
|
||||
: `<span class="badge badge-tidak">Tidak</span>`;
|
||||
}
|
||||
function badgeOperasional(val) {
|
||||
return val === 'buka'
|
||||
? `<span class="badge badge-buka">Buka</span>`
|
||||
: `<span class="badge badge-tutup">Tutup</span>`;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
5. BUAT KONTEN POPUP DETAIL DATA SPBU
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
/**
|
||||
* Menghasilkan HTML untuk popup detail SPBU.
|
||||
* Ditampilkan ketika marker di-klik.
|
||||
*/
|
||||
function buatPopupDetail(spbu) {
|
||||
return `
|
||||
<div class="popup-header">
|
||||
⛽ ${spbu.nama_spbu}
|
||||
</div>
|
||||
<div class="popup-body">
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td>Status Ramai</td>
|
||||
<td>${badgeRamai(spbu.status_ramai)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Buka 24 Jam</td>
|
||||
<td>${badgeBuka24(spbu.buka_24_jam)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>${badgeOperasional(spbu.status_operasional)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nomor HP</td>
|
||||
<td>📞 ${spbu.nomor_hp}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Latitude</td>
|
||||
<td>${parseFloat(spbu.latitude).toFixed(6)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Longitude</td>
|
||||
<td>${parseFloat(spbu.longitude).toFixed(6)}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr class="divider">
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-primary" onclick="bukaFormEdit(${spbu.id})">✏️ Edit</button>
|
||||
<button class="btn btn-danger" onclick="hapusData(${spbu.id}, '${spbu.nama_spbu.replace(/'/g, "\\'")}')">🗑️ Hapus</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
6. AMBIL DATA DARI DATABASE & TAMPILKAN MARKER
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
/**
|
||||
* Ambil semua data SPBU dari server lalu tampilkan sebagai marker di peta.
|
||||
*/
|
||||
async function muatSemuaMarker() {
|
||||
try {
|
||||
const res = await fetch('ambil_data.php');
|
||||
const json = await res.json();
|
||||
|
||||
if (json.status !== 'success') {
|
||||
console.error('Gagal ambil data:', json.message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Hapus marker lama yang sudah ada di peta
|
||||
Object.values(markersMap).forEach(m => map.removeLayer(m));
|
||||
// Kosongkan objek referensi marker
|
||||
for (const key in markersMap) delete markersMap[key];
|
||||
|
||||
// Buat marker baru untuk setiap SPBU
|
||||
json.data.forEach(spbu => {
|
||||
tambahMarker(spbu);
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error fetch ambil_data:', err);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tambahkan satu marker ke peta dan daftarkan ke markersMap.
|
||||
* @param {object} spbu - Data SPBU dari database
|
||||
*/
|
||||
function tambahMarker(spbu) {
|
||||
const warna = getWarnaMarker(spbu);
|
||||
const ikon = buatIkon(warna);
|
||||
|
||||
const marker = L.marker([spbu.latitude, spbu.longitude], { icon: ikon })
|
||||
.addTo(map)
|
||||
.bindPopup(buatPopupDetail(spbu), { maxWidth: 320 });
|
||||
|
||||
// Simpan referensi marker
|
||||
markersMap[spbu.id] = marker;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
7. KLIK PETA → FORM TAMBAH DATA SPBU
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
// Event: saat user klik di peta
|
||||
map.on('click', function (e) {
|
||||
const lat = e.latlng.lat.toFixed(7);
|
||||
const lng = e.latlng.lng.toFixed(7);
|
||||
|
||||
// Tutup popup sementara yang mungkin masih terbuka
|
||||
if (tempPopup) {
|
||||
map.closePopup(tempPopup);
|
||||
tempPopup = null;
|
||||
}
|
||||
|
||||
// Konten form tambah data (lat & lng disembunyikan dari user)
|
||||
const formHtml = `
|
||||
<div class="popup-header">📍 Tambah SPBU Baru</div>
|
||||
<div class="popup-body">
|
||||
<div class="coord-display">
|
||||
📌 Koordinat yang akan disimpan:
|
||||
<span>Lat: ${lat}</span>
|
||||
<span>Lng: ${lng}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Nama SPBU</label>
|
||||
<input type="text" id="f-nama" placeholder="Contoh: SPBU 44.501.12" maxlength="100">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Status Keramaian</label>
|
||||
<select id="f-ramai">
|
||||
<option value="">-- Pilih Status --</option>
|
||||
<option value="ramai">Ramai</option>
|
||||
<option value="tidak_ramai">Tidak Ramai</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Buka 24 Jam?</label>
|
||||
<select id="f-24jam">
|
||||
<option value="">-- Pilih --</option>
|
||||
<option value="ya">Ya</option>
|
||||
<option value="tidak">Tidak</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Status Operasional</label>
|
||||
<select id="f-operasional">
|
||||
<option value="">-- Pilih Status --</option>
|
||||
<option value="buka">Buka</option>
|
||||
<option value="tutup">Tutup</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Nomor HP</label>
|
||||
<input type="text" id="f-hp" placeholder="Contoh: 0812-3456-7890" maxlength="20">
|
||||
</div>
|
||||
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-primary" onclick="simpanData(${lat}, ${lng})">💾 Simpan</button>
|
||||
<button class="btn btn-secondary" onclick="map.closePopup()">✕ Batal</button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
// Buka popup di lokasi yang diklik
|
||||
tempPopup = L.popup({ maxWidth: 340 })
|
||||
.setLatLng(e.latlng)
|
||||
.setContent(formHtml)
|
||||
.openOn(map);
|
||||
});
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
8. SIMPAN DATA SPBU BARU (TAMBAH)
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
/**
|
||||
* Kirim data form tambah ke server via fetch (AJAX).
|
||||
* Dipanggil oleh tombol "Simpan" di popup form tambah.
|
||||
* @param {number} lat - Latitude dari klik peta
|
||||
* @param {number} lng - Longitude dari klik peta
|
||||
*/
|
||||
async function simpanData(lat, lng) {
|
||||
// Ambil nilai dari form
|
||||
const nama = document.getElementById('f-nama')?.value.trim();
|
||||
const ramai = document.getElementById('f-ramai')?.value;
|
||||
const jam24 = document.getElementById('f-24jam')?.value;
|
||||
const operasional = document.getElementById('f-operasional')?.value;
|
||||
const hp = document.getElementById('f-hp')?.value.trim();
|
||||
|
||||
// Validasi input tidak boleh kosong
|
||||
if (!nama || !ramai || !jam24 || !operasional || !hp) {
|
||||
tampilkanToast('⚠️ Semua field wajib diisi!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Siapkan data untuk dikirim
|
||||
const formData = new FormData();
|
||||
formData.append('nama_spbu', nama);
|
||||
formData.append('status_ramai', ramai);
|
||||
formData.append('buka_24_jam', jam24);
|
||||
formData.append('status_operasional', operasional);
|
||||
formData.append('nomor_hp', hp);
|
||||
formData.append('latitude', lat);
|
||||
formData.append('longitude', lng);
|
||||
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const res = await fetch('tambah.php', { method: 'POST', body: formData });
|
||||
const json = await res.json();
|
||||
|
||||
if (json.status === 'success') {
|
||||
// Tutup popup form
|
||||
map.closePopup();
|
||||
tempPopup = null;
|
||||
|
||||
// Langsung tambah marker baru tanpa perlu refresh halaman
|
||||
tambahMarker(json.data);
|
||||
|
||||
// Geser peta ke lokasi SPBU baru dan buka popupnya
|
||||
map.panTo([json.data.latitude, json.data.longitude]);
|
||||
markersMap[json.data.id].openPopup();
|
||||
|
||||
tampilkanToast('✅ Data SPBU berhasil ditambahkan!', 'success');
|
||||
} else {
|
||||
tampilkanToast('❌ ' + json.message, 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
tampilkanToast('❌ Gagal terhubung ke server.', 'error');
|
||||
console.error(err);
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
9. BUKA FORM EDIT DATA SPBU
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
/**
|
||||
* Ganti isi popup marker dengan form edit.
|
||||
* Latitude dan longitude TIDAK ditampilkan dan TIDAK bisa diedit.
|
||||
* @param {number} id - ID SPBU yang akan diedit
|
||||
*/
|
||||
async function bukaFormEdit(id) {
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
// Ambil data terbaru dari server
|
||||
const res = await fetch('ambil_data.php');
|
||||
const json = await res.json();
|
||||
hideLoading();
|
||||
|
||||
if (json.status !== 'success') {
|
||||
tampilkanToast('❌ Gagal mengambil data.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Cari data SPBU yang sesuai ID
|
||||
const spbu = json.data.find(s => s.id == id);
|
||||
if (!spbu) {
|
||||
tampilkanToast('❌ Data tidak ditemukan.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Buat konten form edit (lat & lng disembunyikan)
|
||||
const formEditHtml = `
|
||||
<div class="popup-header">✏️ Edit Data SPBU</div>
|
||||
<div class="popup-body">
|
||||
<div class="form-group">
|
||||
<label>Nama SPBU</label>
|
||||
<input type="text" id="e-nama" value="${spbu.nama_spbu.replace(/"/g, '"')}" maxlength="100">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Status Keramaian</label>
|
||||
<select id="e-ramai">
|
||||
<option value="ramai" ${spbu.status_ramai === 'ramai' ? 'selected' : ''}>Ramai</option>
|
||||
<option value="tidak_ramai" ${spbu.status_ramai === 'tidak_ramai' ? 'selected' : ''}>Tidak Ramai</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Buka 24 Jam?</label>
|
||||
<select id="e-24jam">
|
||||
<option value="ya" ${spbu.buka_24_jam === 'ya' ? 'selected' : ''}>Ya</option>
|
||||
<option value="tidak" ${spbu.buka_24_jam === 'tidak' ? 'selected' : ''}>Tidak</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Status Operasional</label>
|
||||
<select id="e-operasional">
|
||||
<option value="buka" ${spbu.status_operasional === 'buka' ? 'selected' : ''}>Buka</option>
|
||||
<option value="tutup" ${spbu.status_operasional === 'tutup' ? 'selected' : ''}>Tutup</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Nomor HP</label>
|
||||
<input type="text" id="e-hp" value="${spbu.nomor_hp}" maxlength="20">
|
||||
</div>
|
||||
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-success" onclick="simpanEdit(${id})">💾 Simpan</button>
|
||||
<button class="btn btn-secondary" onclick="tampilkanDetailDariId(${id})">✕ Batal</button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
// Update isi popup yang sedang terbuka
|
||||
markersMap[id].setPopupContent(formEditHtml).openPopup();
|
||||
|
||||
} catch (err) {
|
||||
hideLoading();
|
||||
tampilkanToast('❌ Gagal terhubung ke server.', 'error');
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
10. SIMPAN PERUBAHAN EDIT DATA SPBU
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
/**
|
||||
* Kirim data form edit ke server.
|
||||
* Latitude & longitude tidak dikirim → tidak berubah di database.
|
||||
* @param {number} id - ID SPBU yang diedit
|
||||
*/
|
||||
async function simpanEdit(id) {
|
||||
const nama = document.getElementById('e-nama')?.value.trim();
|
||||
const ramai = document.getElementById('e-ramai')?.value;
|
||||
const jam24 = document.getElementById('e-24jam')?.value;
|
||||
const operasional = document.getElementById('e-operasional')?.value;
|
||||
const hp = document.getElementById('e-hp')?.value.trim();
|
||||
|
||||
if (!nama || !ramai || !jam24 || !operasional || !hp) {
|
||||
tampilkanToast('⚠️ Semua field wajib diisi!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('id', id);
|
||||
formData.append('nama_spbu', nama);
|
||||
formData.append('status_ramai', ramai);
|
||||
formData.append('buka_24_jam', jam24);
|
||||
formData.append('status_operasional', operasional);
|
||||
formData.append('nomor_hp', hp);
|
||||
// ⚠️ latitude & longitude sengaja TIDAK dikirim
|
||||
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const res = await fetch('edit.php', { method: 'POST', body: formData });
|
||||
const json = await res.json();
|
||||
|
||||
if (json.status === 'success') {
|
||||
const spbuBaru = json.data;
|
||||
|
||||
// Perbarui ikon marker sesuai kondisi baru
|
||||
const warnaBar = getWarnaMarker(spbuBaru);
|
||||
markersMap[id].setIcon(buatIkon(warnaBar));
|
||||
|
||||
// Perbarui isi popup dengan data terbaru
|
||||
markersMap[id].setPopupContent(buatPopupDetail(spbuBaru));
|
||||
markersMap[id].openPopup();
|
||||
|
||||
tampilkanToast('✅ Data berhasil diperbarui!', 'success');
|
||||
} else {
|
||||
tampilkanToast('❌ ' + json.message, 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
tampilkanToast('❌ Gagal terhubung ke server.', 'error');
|
||||
console.error(err);
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
11. HAPUS DATA SPBU
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
/**
|
||||
* Hapus data SPBU dari database dan marker dari peta.
|
||||
* @param {number} id - ID SPBU yang dihapus
|
||||
* @param {string} namaSpbu - Nama SPBU untuk konfirmasi
|
||||
*/
|
||||
async function hapusData(id, namaSpbu) {
|
||||
// Konfirmasi sebelum menghapus
|
||||
if (!confirm(`Yakin ingin menghapus SPBU "${namaSpbu}"?\nTindakan ini tidak dapat dibatalkan.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('id', id);
|
||||
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const res = await fetch('hapus.php', { method: 'POST', body: formData });
|
||||
const json = await res.json();
|
||||
|
||||
if (json.status === 'success') {
|
||||
// Hapus marker dari peta
|
||||
if (markersMap[id]) {
|
||||
map.removeLayer(markersMap[id]);
|
||||
delete markersMap[id];
|
||||
}
|
||||
tampilkanToast('🗑️ Data SPBU berhasil dihapus.', 'success');
|
||||
} else {
|
||||
tampilkanToast('❌ ' + json.message, 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
tampilkanToast('❌ Gagal terhubung ke server.', 'error');
|
||||
console.error(err);
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
12. HELPER: Tampilkan detail dari ID (tombol Batal di form edit)
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
async function tampilkanDetailDariId(id) {
|
||||
try {
|
||||
const res = await fetch('ambil_data.php');
|
||||
const json = await res.json();
|
||||
const spbu = json.data.find(s => s.id == id);
|
||||
if (spbu && markersMap[id]) {
|
||||
markersMap[id].setPopupContent(buatPopupDetail(spbu)).openPopup();
|
||||
}
|
||||
} catch (err) { console.error(err); }
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
13. INISIALISASI: Muat semua marker saat halaman dibuka
|
||||
══════════════════════════════════════════════════════════ */
|
||||
|
||||
// Panggil fungsi ini sekali saat halaman selesai dimuat
|
||||
muatSemuaMarker();
|
||||
Reference in New Issue
Block a user