luthfihadinugroho79
269 lines
11 KiB
HTML
269 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS SPBU Pontianak</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
|
|
<style>
|
|
body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; height: 100vh; background-color: #f4f7f6; }
|
|
|
|
/* Layout Sidebar */
|
|
#sidebar { width: 320px; background-color: #ffffff; box-shadow: 2px 0 10px rgba(0,0,0,0.1); display: flex; flex-direction: column; z-index: 1000; }
|
|
.sidebar-header { background-color: #007bff; color: white; padding: 20px; text-align: center; }
|
|
.sidebar-header h2 { margin: 0; font-size: 20px; }
|
|
|
|
#summary-content { padding: 20px; overflow-y: auto; flex-grow: 1; }
|
|
|
|
/* Kartu Rangkuman */
|
|
.summary-card { background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid #e9ecef; margin-bottom: 20px; }
|
|
.stat-item { display: flex; justify-content: space-between; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dashed #ccc; font-size: 15px; }
|
|
.stat-item:last-child { border-bottom: none; margin-bottom: 0; }
|
|
|
|
/* List SPBU di Sidebar */
|
|
.spbu-list-item { background: white; border: 1px solid #eee; padding: 12px; border-radius: 6px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
|
.spbu-list-item strong { display: block; margin-bottom: 5px; color: #333; }
|
|
|
|
/* Badge Status */
|
|
.badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; color: white; text-transform: uppercase; }
|
|
.badge.green { background-color: #28a745; }
|
|
.badge.yellow { background-color: #ffc107; color: #333; }
|
|
|
|
/* Peta */
|
|
#map-container { flex-grow: 1; position: relative; }
|
|
#map { width: 100%; height: 100%; }
|
|
|
|
/* Styling Popup Form */
|
|
.popup-form { min-width: 200px; }
|
|
.popup-form h4 { margin: 0 0 10px 0; color: #333; border-bottom: 1px solid #eee; padding-bottom: 5px; }
|
|
.popup-form input, .popup-form select { width: 100%; margin-bottom: 10px; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
|
|
|
|
/* Tombol-tombol */
|
|
.popup-form button { width: 100%; padding: 8px; margin-bottom: 5px; color: white; border: none; cursor: pointer; border-radius: 4px; font-weight: bold; }
|
|
.btn-simpan { background-color: #007bff; }
|
|
.btn-simpan:hover { background-color: #0056b3; }
|
|
.btn-batal { background-color: #6c757d; }
|
|
.btn-edit { background-color: #ffc107; color: #333 !important; }
|
|
.btn-hapus { background-color: #dc3545; }
|
|
|
|
.action-buttons { display: flex; gap: 5px; margin-top: 10px; }
|
|
.action-buttons button { margin-bottom: 0; flex: 1; font-size: 11px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>WebGIS SPBU</h2>
|
|
<small>Kota Pontianak</small>
|
|
</div>
|
|
<div id="summary-content">
|
|
<p style="text-align: center; color: #666;">Memuat data...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="map-container">
|
|
<div id="map"></div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<script>
|
|
// 1. Inisialisasi Peta
|
|
var map = L.map('map').setView([-0.026330, 109.342504], 13);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
var spbuLayer = L.layerGroup().addTo(map);
|
|
var tempMarker = null;
|
|
|
|
// 2. Definisi Ikon Custom
|
|
var greenIcon = new L.Icon({
|
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
|
|
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
|
iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]
|
|
});
|
|
|
|
var yellowIcon = new L.Icon({
|
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-gold.png',
|
|
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
|
iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]
|
|
});
|
|
|
|
// 3. Fungsi Load Data
|
|
function muatDataPeta() {
|
|
spbuLayer.clearLayers();
|
|
|
|
fetch('ambil_data.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
let total = data.length;
|
|
let c24 = 0, cNon = 0;
|
|
let listHTML = '';
|
|
|
|
data.forEach(item => {
|
|
let is24 = (item.status_24_jam === 'yes');
|
|
if (is24) c24++; else cNon++;
|
|
|
|
let icon = is24 ? greenIcon : yellowIcon;
|
|
let statusLabel = is24 ? '<span style="color:green;font-weight:bold;">Ya (24 Jam)</span>' : '<span style="color:#d4a017;font-weight:bold;">Tidak</span>';
|
|
|
|
// Konten Popup dengan Tombol Edit & Hapus
|
|
let popupContent = `
|
|
<div class="popup-form">
|
|
<h4>${item.nama_spbu}</h4>
|
|
No WA: ${item.no_wa}<br>
|
|
Buka 24 Jam: ${statusLabel}
|
|
<div class="action-buttons">
|
|
<button class="btn-edit" onclick="bukaFormEdit('${item.id}', '${item.nama_spbu}', '${item.no_wa}', '${item.status_24_jam}', ${item.lat}, ${item.lng})">EDIT</button>
|
|
<button class="btn-hapus" onclick="hapusData('${item.id}')">HAPUS</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Buat Marker (Bisa Digeser)
|
|
let marker = L.marker([item.lat, item.lng], { icon: icon, draggable: true })
|
|
.bindPopup(popupContent)
|
|
.addTo(spbuLayer);
|
|
|
|
// Event Selesai Digeser (Auto Save Lokasi)
|
|
marker.on('dragend', function(e) {
|
|
let pos = marker.getLatLng();
|
|
if(confirm("Simpan koordinat baru SPBU ini?")) {
|
|
updateLokasi(item.id, pos.lat, pos.lng);
|
|
} else {
|
|
muatDataPeta(); // Refresh jika batal
|
|
}
|
|
});
|
|
|
|
// HTML List Sidebar
|
|
let bClass = is24 ? 'badge green' : 'badge yellow';
|
|
let bText = is24 ? '24 Jam' : 'Reguler';
|
|
listHTML += `
|
|
<div class="spbu-list-item">
|
|
<strong>${item.nama_spbu}</strong>
|
|
<span class="${bClass}">${bText}</span>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
// Update Sidebar
|
|
document.getElementById('summary-content').innerHTML = `
|
|
<div class="summary-card">
|
|
<div class="stat-item"><span>Total:</span> <strong>${total}</strong></div>
|
|
<div class="stat-item"><span>Buka 24 Jam:</span> <strong style="color:green;">${c24}</strong></div>
|
|
<div class="stat-item"><span>Buka Reguler:</span> <strong style="color:#d4a017;">${cNon}</strong></div>
|
|
</div>
|
|
<h3 style="font-size:15px; color:#555;">Daftar SPBU:</h3>
|
|
${listHTML}
|
|
`;
|
|
})
|
|
.catch(err => console.error("Error muat data:", err));
|
|
}
|
|
|
|
// Panggil fungsi saat start
|
|
muatDataPeta();
|
|
|
|
// 4. Klik Peta untuk Tambah Baru
|
|
map.on('click', function(e) {
|
|
if (tempMarker) map.removeLayer(tempMarker);
|
|
|
|
let formTambah = `
|
|
<div class="popup-form">
|
|
<h4>Tambah SPBU</h4>
|
|
<input type="text" id="add_nama" placeholder="Nama SPBU">
|
|
<input type="text" id="add_wa" placeholder="No WhatsApp">
|
|
<select id="add_status">
|
|
<option value="no">Buka Reguler</option>
|
|
<option value="yes">Buka 24 Jam</option>
|
|
</select>
|
|
<button class="btn-simpan" onclick="prosesSimpan(${e.latlng.lat}, ${e.latlng.lng}, 'tambah')">SIMPAN</button>
|
|
</div>
|
|
`;
|
|
tempMarker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map);
|
|
tempMarker.bindPopup(formTambah).openPopup();
|
|
});
|
|
|
|
// 5. Form Edit
|
|
function bukaFormEdit(id, nama, wa, status, lat, lng) {
|
|
let sYes = status === 'yes' ? 'selected' : '';
|
|
let sNo = status === 'no' ? 'selected' : '';
|
|
|
|
let formEdit = `
|
|
<div class="popup-form">
|
|
<h4>Edit SPBU</h4>
|
|
<input type="hidden" id="edit_id" value="${id}">
|
|
<input type="text" id="edit_nama" value="${nama}">
|
|
<input type="text" id="edit_wa" value="${wa}">
|
|
<select id="edit_status">
|
|
<option value="no" ${sNo}>Buka Reguler</option>
|
|
<option value="yes" ${sYes}>Buka 24 Jam</option>
|
|
</select>
|
|
<button class="btn-simpan" onclick="prosesSimpan(${lat}, ${lng}, 'edit')">UPDATE</button>
|
|
<button class="btn-batal" onclick="map.closePopup()">BATAL</button>
|
|
</div>
|
|
`;
|
|
L.popup().setLatLng([lat, lng]).setContent(formEdit).openOn(map);
|
|
}
|
|
|
|
// 6. Fungsi Kirim Data (Tambah/Edit)
|
|
function prosesSimpan(lat, lng, mode) {
|
|
let prefix = mode === 'edit' ? 'edit_' : 'add_';
|
|
let id = mode === 'edit' ? document.getElementById('edit_id').value : '';
|
|
let nama = document.getElementById(prefix + 'nama').value;
|
|
let wa = document.getElementById(prefix + 'wa').value;
|
|
let status = document.getElementById(prefix + 'status').value;
|
|
|
|
if (!nama || !wa) return alert("Data harus lengkap!");
|
|
|
|
let fd = new FormData();
|
|
if(mode === 'edit') fd.append('id', id);
|
|
fd.append('nama_spbu', nama);
|
|
fd.append('no_wa', wa);
|
|
fd.append('status_24_jam', status);
|
|
fd.append('lat', lat);
|
|
fd.append('lng', lng);
|
|
|
|
let url = mode === 'edit' ? 'edit_data.php' : 'simpan_data.php';
|
|
|
|
fetch(url, { method: 'POST', body: fd })
|
|
.then(res => res.text())
|
|
.then(msg => {
|
|
alert(msg);
|
|
map.closePopup();
|
|
if(tempMarker) map.removeLayer(tempMarker);
|
|
muatDataPeta();
|
|
});
|
|
}
|
|
|
|
// 7. Fungsi Hapus
|
|
function hapusData(id) {
|
|
if(confirm("Hapus data SPBU ini?")) {
|
|
let fd = new FormData();
|
|
fd.append('id', id);
|
|
fetch('hapus_data.php', { method: 'POST', body: fd })
|
|
.then(res => res.text())
|
|
.then(msg => {
|
|
alert(msg);
|
|
muatDataPeta();
|
|
});
|
|
}
|
|
}
|
|
|
|
// 8. Fungsi Update Lokasi (Geser)
|
|
function updateLokasi(id, lat, lng) {
|
|
let fd = new FormData();
|
|
fd.append('id', id);
|
|
fd.append('lat', lat);
|
|
fd.append('lng', lng);
|
|
fetch('update_lokasi.php', { method: 'POST', body: fd })
|
|
.then(res => res.text())
|
|
.then(() => muatDataPeta());
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |