345 lines
8.5 KiB
PHP
345 lines
8.5 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>GIS SPBU PRO FINAL</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
|
|
<style>
|
|
#map{
|
|
height:100vh;
|
|
}
|
|
|
|
body{
|
|
margin:0;
|
|
font-family:'Segoe UI',sans-serif;
|
|
}
|
|
|
|
/* tombol popup marker */
|
|
.btn{
|
|
padding:8px 14px;
|
|
border:none;
|
|
border-radius:10px;
|
|
cursor:pointer;
|
|
font-size:14px;
|
|
font-weight:700;
|
|
margin-top:8px;
|
|
margin-right:6px;
|
|
transition:.2s;
|
|
}
|
|
|
|
.btn:hover{
|
|
transform:translateY(-1px);
|
|
}
|
|
|
|
.edit{
|
|
background:#f59e0b;
|
|
color:white;
|
|
}
|
|
|
|
.delete{
|
|
background:#ef4444;
|
|
color:white;
|
|
}
|
|
|
|
/* popup utama */
|
|
.leaflet-popup-content-wrapper{
|
|
border-radius:24px;
|
|
box-shadow:0 14px 35px rgba(0,0,0,.18);
|
|
padding:0;
|
|
overflow:hidden;
|
|
}
|
|
|
|
/* ukuran NORMAL semua popup */
|
|
.leaflet-popup-content{
|
|
margin:0 !important;
|
|
min-width:300px;
|
|
max-width:360px;
|
|
padding:22px;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.leaflet-popup-tip{
|
|
width:18px;
|
|
height:18px;
|
|
box-shadow:none;
|
|
}
|
|
|
|
/* close */
|
|
.leaflet-popup-close-button{
|
|
top:12px !important;
|
|
right:14px !important;
|
|
font-size:28px !important;
|
|
color:#888 !important;
|
|
}
|
|
|
|
/* form popup */
|
|
.leaflet-popup-content form{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:12px;
|
|
}
|
|
|
|
.leaflet-popup-content label{
|
|
font-size:15px;
|
|
font-weight:700;
|
|
color:#333;
|
|
margin-bottom:-4px;
|
|
}
|
|
|
|
.leaflet-popup-content input,
|
|
.leaflet-popup-content select{
|
|
width:100%;
|
|
box-sizing:border-box;
|
|
padding:12px 14px;
|
|
border:1px solid #ddd;
|
|
border-radius:14px;
|
|
font-size:15px;
|
|
outline:none;
|
|
background:#fff;
|
|
}
|
|
|
|
.leaflet-popup-content input:focus,
|
|
.leaflet-popup-content select:focus{
|
|
border-color:#ff8a00;
|
|
box-shadow:0 0 0 4px rgba(255,138,0,.12);
|
|
}
|
|
|
|
.leaflet-popup-content button[type="submit"]{
|
|
margin-top:8px;
|
|
padding:13px;
|
|
border:none;
|
|
border-radius:16px;
|
|
background:linear-gradient(90deg,#ff9800,#ff6d00);
|
|
color:white;
|
|
font-size:17px;
|
|
font-weight:800;
|
|
cursor:pointer;
|
|
transition:.2s;
|
|
}
|
|
|
|
.leaflet-popup-content button[type="submit"]:hover{
|
|
transform:translateY(-1px);
|
|
}
|
|
|
|
/* popup marker info biar rapi */
|
|
.leaflet-popup-content b{
|
|
font-size:18px;
|
|
color:#111;
|
|
}
|
|
|
|
.leaflet-popup-content span{
|
|
font-weight:700;
|
|
}
|
|
|
|
/* layer control checkbox TIDAK DIUBAH */
|
|
.leaflet-control-layers{
|
|
border-radius:18px !important;
|
|
box-shadow:0 8px 22px rgba(0,0,0,.15);
|
|
overflow:hidden;
|
|
}
|
|
|
|
.leaflet-control-layers-expanded{
|
|
padding:12px;
|
|
font-size:15px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
const map = L.map('map').setView([-0.02, 109.34], 13);
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
// ================= LAYER GROUPS =================
|
|
const layer24Jam = L.layerGroup().addTo(map);
|
|
const layerNon24Jam = L.layerGroup().addTo(map);
|
|
|
|
// Overlay layers untuk Layers Control
|
|
const overlayLayers = {
|
|
"🟢 SPBU Buka 24 Jam" : layer24Jam,
|
|
"🔴 SPBU Tidak Buka 24 Jam" : layerNon24Jam
|
|
};
|
|
|
|
// Tambahkan Layers Control ke peta
|
|
L.control.layers(null, overlayLayers, { collapsed: false }).addTo(map);
|
|
|
|
// ================= ICON =================
|
|
const greenIcon = new L.Icon({
|
|
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
|
|
iconSize: [32, 32]
|
|
});
|
|
|
|
const redIcon = new L.Icon({
|
|
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
|
|
iconSize: [32, 32]
|
|
});
|
|
|
|
let markerList = [];
|
|
|
|
// ================= LOAD DATA =================
|
|
function loadData() {
|
|
layer24Jam.clearLayers();
|
|
layerNon24Jam.clearLayers();
|
|
markerList = [];
|
|
|
|
fetch('ambil.php')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
data.forEach(d => {
|
|
|
|
const is24Jam = d.status === 'yes';
|
|
const icon = is24Jam ? greenIcon : redIcon;
|
|
|
|
const marker = L.marker([d.latitude, d.longitude], {
|
|
icon: icon,
|
|
draggable: true
|
|
});
|
|
|
|
// Tambahkan ke layer group yang sesuai
|
|
if (is24Jam) {
|
|
layer24Jam.addLayer(marker);
|
|
} else {
|
|
layerNon24Jam.addLayer(marker);
|
|
}
|
|
|
|
// DRAG SIMPAN LOKASI
|
|
marker.on('dragend', function(e){
|
|
const pos = e.target.getLatLng();
|
|
|
|
const dataSend = new URLSearchParams();
|
|
dataSend.append("id", d.id);
|
|
dataSend.append("lat", pos.lat);
|
|
dataSend.append("lng", pos.lng);
|
|
|
|
fetch('update_lokasi.php', {
|
|
method: 'POST',
|
|
body: dataSend
|
|
})
|
|
.then(res => res.text())
|
|
.then(res => {
|
|
console.log(res);
|
|
alert("Lokasi berhasil diupdate!");
|
|
});
|
|
});
|
|
|
|
marker.bindPopup(`
|
|
<b>${d.nama_spbu}</b><br>
|
|
WA: ${d.no_wa}<br>
|
|
24 Jam: <span style="color:${is24Jam ? 'green' : 'red'}">${is24Jam ? 'Ya' : 'Tidak'}</span><br>
|
|
|
|
<button class="btn edit" onclick="editData(${d.id}, '${d.nama_spbu}', '${d.no_wa}', '${d.status}')">Edit</button>
|
|
<button class="btn delete" onclick="hapusData(${d.id})">Hapus</button>
|
|
`);
|
|
|
|
markerList.push(marker);
|
|
});
|
|
});
|
|
}
|
|
|
|
// ================= EDIT =================
|
|
function editData(id, nama, wa, status) {
|
|
const form = `
|
|
<form id="editForm">
|
|
Nama:<br>
|
|
<input type="text" name="nama" value="${nama}"><br>
|
|
WA:<br>
|
|
<input type="text" name="wa" value="${wa}"><br>
|
|
Status:<br>
|
|
<select name="status">
|
|
<option ${status=='yes'?'selected':''} value="yes">Yes (Buka 24 Jam)</option>
|
|
<option ${status=='no'?'selected':''} value="no">No (Tidak 24 Jam)</option>
|
|
</select><br><br>
|
|
<button type="submit">Update</button>
|
|
</form>
|
|
`;
|
|
|
|
L.popup().setLatLng(map.getCenter()).setContent(form).openOn(map);
|
|
|
|
setTimeout(()=>{
|
|
document.getElementById('editForm').addEventListener('submit', function(e){
|
|
e.preventDefault();
|
|
|
|
const data = new FormData(this);
|
|
data.append('id', id);
|
|
|
|
fetch('edit.php', {
|
|
method:'POST',
|
|
body:data
|
|
}).then(()=>{
|
|
alert("Data diupdate!");
|
|
loadData();
|
|
});
|
|
});
|
|
},300);
|
|
}
|
|
|
|
// ================= HAPUS =================
|
|
function hapusData(id) {
|
|
if(confirm("Yakin hapus?")) {
|
|
fetch('hapus.php?id=' + id)
|
|
.then(()=>{
|
|
alert("Data dihapus!");
|
|
loadData();
|
|
});
|
|
}
|
|
}
|
|
|
|
// ================= TAMBAH =================
|
|
map.on('click', function(e) {
|
|
const lat = e.latlng.lat;
|
|
const lng = e.latlng.lng;
|
|
|
|
const form = `
|
|
<form id="formInput">
|
|
Nama SPBU:<br>
|
|
<input type="text" name="nama_spbu" required><br>
|
|
|
|
No WA:<br>
|
|
<input type="text" name="no_wa" required><br>
|
|
|
|
Status:<br>
|
|
<select name="status">
|
|
<option value="yes">Yes (Buka 24 Jam)</option>
|
|
<option value="no">No (Tidak 24 Jam)</option>
|
|
</select><br><br>
|
|
|
|
<input type="hidden" name="latitude" value="${lat}">
|
|
<input type="hidden" name="longitude" value="${lng}">
|
|
|
|
<button type="submit">Simpan</button>
|
|
</form>
|
|
`;
|
|
|
|
L.popup().setLatLng(e.latlng).setContent(form).openOn(map);
|
|
|
|
setTimeout(()=>{
|
|
document.getElementById('formInput').addEventListener('submit', function(ev){
|
|
ev.preventDefault();
|
|
|
|
const data = new FormData(this);
|
|
|
|
fetch('simpan.php',{
|
|
method:'POST',
|
|
body:data
|
|
}).then(()=>{
|
|
alert("Tersimpan!");
|
|
loadData();
|
|
});
|
|
});
|
|
},300);
|
|
});
|
|
|
|
loadData();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|