ocabacaa
1073 lines
22 KiB
JavaScript
1073 lines
22 KiB
JavaScript
let currentMarker = null;
|
|
let userMarker = null;
|
|
let userLat = null;
|
|
let userLng = null;
|
|
let markerData = {};
|
|
|
|
let routingControl = null;
|
|
let modeAdmin = true;
|
|
let currentObjekLayer = null;
|
|
let sedangMenggambar = false;
|
|
|
|
const markerHijau = new L.Icon({
|
|
iconUrl:
|
|
"https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png",
|
|
|
|
shadowUrl:
|
|
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
|
|
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
});
|
|
|
|
const markerMerah = new L.Icon({
|
|
iconUrl:
|
|
"https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png",
|
|
|
|
shadowUrl:
|
|
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
|
|
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
});
|
|
|
|
// 1. Inisialisasi Peta
|
|
let map = L.map("map").setView([-0.0263, 109.3425], 13);
|
|
|
|
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
|
|
|
|
let markerGroup = L.layerGroup().addTo(map);
|
|
|
|
let drawnItems = new L.FeatureGroup();
|
|
|
|
map.addLayer(drawnItems);
|
|
|
|
let drawControl = new L.Control.Draw({
|
|
draw: {
|
|
marker: false,
|
|
polyline: true,
|
|
polygon: true,
|
|
rectangle: false,
|
|
circle: false,
|
|
circlemarker: false,
|
|
},
|
|
|
|
edit: {
|
|
featureGroup: drawnItems,
|
|
},
|
|
});
|
|
|
|
map.addControl(drawControl);
|
|
|
|
// TAMBAH DI SINI
|
|
map.on(L.Draw.Event.DRAWSTART, function () {
|
|
sedangMenggambar = true;
|
|
});
|
|
|
|
map.on(L.Draw.Event.DRAWSTOP, function () {
|
|
sedangMenggambar = false;
|
|
});
|
|
|
|
console.log("draw berhasil");
|
|
|
|
// 2. Load Marker Dari Database
|
|
loadSPBU();
|
|
loadObjekPeta();
|
|
|
|
function loadSPBU() {
|
|
markerGroup.clearLayers();
|
|
markerData = {};
|
|
|
|
currentMarker = null;
|
|
|
|
fetch("api/get_spbu.php")
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
data.forEach((spbu) => {
|
|
let marker = L.marker([spbu.latitude, spbu.longitude], {
|
|
icon: spbu.buka_24_jam == 1 ? markerHijau : markerMerah,
|
|
draggable: false,
|
|
}).addTo(markerGroup);
|
|
|
|
marker.spbuData = spbu;
|
|
markerData[spbu.id] = marker;
|
|
|
|
marker.on("dragend", function () {
|
|
let pos = marker.getLatLng();
|
|
|
|
let latInput = document.getElementById("edit_lat");
|
|
|
|
let lngInput = document.getElementById("edit_lng");
|
|
|
|
if (latInput && lngInput) {
|
|
latInput.value = pos.lat;
|
|
lngInput.value = pos.lng;
|
|
}
|
|
|
|
alert("Posisi marker berubah, klik Simpan untuk menyimpan perubahan");
|
|
});
|
|
|
|
marker.bindPopup(`
|
|
|
|
<div class="w-56">
|
|
|
|
${
|
|
spbu.foto
|
|
? `
|
|
<img
|
|
src="uploads/spbu/${spbu.foto}?t=${Date.now()}"
|
|
class="w-full h-32 object-cover rounded mb-2">
|
|
`
|
|
: ""
|
|
}
|
|
|
|
<h3 class="font-bold text-lg">
|
|
${spbu.nama_spbu}
|
|
</h3>
|
|
|
|
<p class="mb-2">
|
|
${spbu.alamat}
|
|
</p>
|
|
|
|
<p class="mt-2">
|
|
|
|
Status :
|
|
|
|
${statusSPBU(spbu)}
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
Jam :
|
|
|
|
${spbu.buka_24_jam == 1 ? "24 Jam" : spbu.jam_buka + " - " + spbu.jam_tutup}
|
|
|
|
</p>
|
|
|
|
<p class="text-xs">
|
|
Lat : ${spbu.latitude}
|
|
</p>
|
|
|
|
<p class="text-xs mb-2">
|
|
Lng : ${spbu.longitude}
|
|
</p>
|
|
|
|
${
|
|
modeAdmin
|
|
? `
|
|
<div class="flex gap-2 mt-2">
|
|
|
|
<button
|
|
onclick="openEditById(${spbu.id})"
|
|
class="bg-yellow-500 text-white px-3 py-1 rounded">
|
|
|
|
Edit
|
|
|
|
</button>
|
|
|
|
<button
|
|
onclick="hapusSPBU(${spbu.id})"
|
|
class="bg-red-500 text-white px-3 py-1 rounded">
|
|
|
|
Hapus
|
|
|
|
</button>
|
|
|
|
</div>
|
|
`
|
|
: ""
|
|
}
|
|
|
|
</div>
|
|
|
|
`);
|
|
});
|
|
});
|
|
}
|
|
|
|
function statusSPBU(spbu) {
|
|
if (spbu.buka_24_jam == 1) {
|
|
return `
|
|
<span class="text-green-600 font-bold">
|
|
BUKA 24 JAM
|
|
</span>
|
|
`;
|
|
}
|
|
|
|
if (!spbu.jam_buka || !spbu.jam_tutup) {
|
|
return `
|
|
<span class="text-gray-500">
|
|
Jam belum diatur
|
|
</span>
|
|
`;
|
|
}
|
|
|
|
let now = new Date().toTimeString().substring(0, 5);
|
|
|
|
let buka = spbu.jam_buka.substring(0, 5);
|
|
|
|
let tutup = spbu.jam_tutup.substring(0, 5);
|
|
|
|
let bukaStatus = false;
|
|
|
|
if (buka < tutup) {
|
|
bukaStatus = now >= buka && now <= tutup;
|
|
} else {
|
|
bukaStatus = now >= buka || now <= tutup;
|
|
}
|
|
|
|
return bukaStatus
|
|
? `<span class="text-green-600 font-bold">BUKA</span>`
|
|
: `<span class="text-red-600 font-bold">TUTUP</span>`;
|
|
}
|
|
|
|
map.on("click", function (e) {
|
|
if (!modeAdmin) {
|
|
return;
|
|
}
|
|
|
|
if (sedangMenggambar) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
map._container.classList.contains("leaflet-draw-draw-polygon") ||
|
|
map._container.classList.contains("leaflet-draw-draw-polyline")
|
|
) {
|
|
return;
|
|
}
|
|
|
|
let lat = e.latlng.lat;
|
|
let lng = e.latlng.lng;
|
|
|
|
L.popup()
|
|
.setLatLng(e.latlng)
|
|
.setContent(
|
|
`
|
|
|
|
<div class="w-64">
|
|
|
|
<h3 class="font-bold mb-3">
|
|
Tambah SPBU
|
|
</h3>
|
|
|
|
<input
|
|
id="nama"
|
|
type="text"
|
|
placeholder="Nama SPBU"
|
|
class="border p-2 w-full mb-2 rounded">
|
|
|
|
<textarea
|
|
id="alamat"
|
|
placeholder="Alamat"
|
|
class="border p-2 w-full mb-2 rounded"></textarea>
|
|
|
|
<input
|
|
id="lat"
|
|
value="${lat}"
|
|
readonly
|
|
class="border p-2 w-full mb-2 rounded">
|
|
|
|
<input
|
|
id="lng"
|
|
value="${lng}"
|
|
readonly
|
|
class="border p-2 w-full mb-2 rounded">
|
|
|
|
<label class="block mb-1">
|
|
Jam Buka
|
|
</label>
|
|
|
|
<input
|
|
type="time"
|
|
id="jam_buka"
|
|
class="border p-2 w-full mb-2 rounded">
|
|
|
|
<label class="block mb-1">
|
|
Jam Tutup
|
|
</label>
|
|
|
|
<input
|
|
type="time"
|
|
id="jam_tutup"
|
|
class="border p-2 w-full mb-2 rounded">
|
|
|
|
<label
|
|
class="flex items-center gap-2 mb-2">
|
|
|
|
<input
|
|
type="checkbox"
|
|
id="buka_24_jam">
|
|
|
|
Buka 24 Jam
|
|
|
|
</label>
|
|
|
|
<input
|
|
type="file"
|
|
id="foto"
|
|
class="border p-2 w-full mb-2 rounded">
|
|
|
|
<img
|
|
id="previewFoto"
|
|
class="hidden w-full h-32 object-cover rounded mb-2">
|
|
|
|
<button
|
|
onclick="simpanSPBU()"
|
|
class="bg-green-500 text-white px-3 py-2 rounded w-full">
|
|
|
|
Simpan
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
`,
|
|
)
|
|
.openOn(map);
|
|
});
|
|
|
|
document.addEventListener("change", function (e) {
|
|
if (e.target.id !== "buka_24_jam") return;
|
|
|
|
let checked = e.target.checked;
|
|
|
|
document.getElementById("jam_buka").disabled = checked;
|
|
|
|
document.getElementById("jam_tutup").disabled = checked;
|
|
});
|
|
|
|
function simpanSPBU() {
|
|
let nama = document.getElementById("nama").value;
|
|
let alamat = document.getElementById("alamat").value;
|
|
let lat = document.getElementById("lat").value;
|
|
let lng = document.getElementById("lng").value;
|
|
|
|
let formData = new FormData();
|
|
|
|
formData.append("nama", nama);
|
|
formData.append("alamat", alamat);
|
|
formData.append("lat", lat);
|
|
formData.append("lng", lng);
|
|
let jamBuka = document.getElementById("jam_buka").value;
|
|
|
|
let jamTutup = document.getElementById("jam_tutup").value;
|
|
|
|
let buka24Jam = document.getElementById("buka_24_jam").checked ? 1 : 0;
|
|
|
|
formData.append("jam_buka", jamBuka);
|
|
|
|
formData.append("jam_tutup", jamTutup);
|
|
|
|
formData.append("buka_24_jam", buka24Jam);
|
|
|
|
let foto = document.getElementById("foto");
|
|
|
|
if (foto && foto.files.length > 0) {
|
|
formData.append("foto", foto.files[0]);
|
|
}
|
|
|
|
fetch("api/tambah_spbu.php", {
|
|
method: "POST",
|
|
|
|
body: formData,
|
|
})
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
if (data.status == "success") {
|
|
alert("Data berhasil disimpan");
|
|
|
|
map.closePopup();
|
|
|
|
loadSPBU();
|
|
loadObjekPeta();
|
|
}
|
|
});
|
|
}
|
|
|
|
function openEdit(spbu) {
|
|
if (!modeAdmin) {
|
|
return;
|
|
}
|
|
|
|
if (currentMarker) {
|
|
currentMarker.dragging.disable();
|
|
}
|
|
|
|
document.getElementById("sidebar").classList.remove("hidden");
|
|
|
|
document.getElementById("edit_id").value = spbu.id;
|
|
|
|
document.getElementById("edit_nama").value = spbu.nama_spbu;
|
|
|
|
document.getElementById("edit_alamat").value = spbu.alamat;
|
|
|
|
document.getElementById("edit_foto").value = "";
|
|
|
|
let preview = document.getElementById("preview_edit_foto");
|
|
|
|
if (spbu.foto) {
|
|
preview.src = "uploads/spbu/" + spbu.foto + "?t=" + Date.now();
|
|
|
|
preview.classList.remove("hidden");
|
|
} else {
|
|
preview.src = "";
|
|
|
|
preview.classList.add("hidden");
|
|
}
|
|
|
|
document.getElementById("edit_jam_buka").value = spbu.jam_buka || "";
|
|
|
|
document.getElementById("edit_jam_tutup").value = spbu.jam_tutup || "";
|
|
|
|
document.getElementById("edit_24jam").checked = spbu.buka_24_jam == 1;
|
|
|
|
document.getElementById("edit_jam_buka").disabled = spbu.buka_24_jam == 1;
|
|
|
|
document.getElementById("edit_jam_tutup").disabled = spbu.buka_24_jam == 1;
|
|
|
|
document.getElementById("edit_lat").value = spbu.latitude;
|
|
|
|
document.getElementById("edit_lng").value = spbu.longitude;
|
|
|
|
currentMarker = markerData[spbu.id];
|
|
|
|
if (currentMarker) {
|
|
currentMarker.dragging.enable();
|
|
}
|
|
}
|
|
|
|
function openEditById(id) {
|
|
if (!modeAdmin) {
|
|
return;
|
|
}
|
|
|
|
let marker = markerData[id];
|
|
|
|
if (!marker) return;
|
|
|
|
openEdit(marker.spbuData);
|
|
}
|
|
|
|
function tutupSidebar() {
|
|
document.getElementById("sidebar").classList.add("hidden");
|
|
|
|
if (currentMarker) {
|
|
currentMarker.dragging.disable();
|
|
}
|
|
|
|
currentMarker = null;
|
|
}
|
|
|
|
function updateSPBU() {
|
|
if (!modeAdmin) {
|
|
return;
|
|
}
|
|
|
|
let formData = new FormData();
|
|
|
|
formData.append("id", document.getElementById("edit_id").value);
|
|
|
|
formData.append("nama", document.getElementById("edit_nama").value);
|
|
|
|
formData.append("alamat", document.getElementById("edit_alamat").value);
|
|
|
|
formData.append("lat", document.getElementById("edit_lat").value);
|
|
|
|
formData.append("lng", document.getElementById("edit_lng").value);
|
|
|
|
let foto = document.getElementById("edit_foto");
|
|
|
|
if (foto.files.length > 0) {
|
|
formData.append("foto", foto.files[0]);
|
|
}
|
|
|
|
formData.append("jam_buka", document.getElementById("edit_jam_buka").value);
|
|
|
|
formData.append("jam_tutup", document.getElementById("edit_jam_tutup").value);
|
|
|
|
formData.append(
|
|
"buka_24_jam",
|
|
document.getElementById("edit_24jam").checked ? 1 : 0,
|
|
);
|
|
|
|
fetch("api/edit_spbu.php", {
|
|
method: "POST",
|
|
body: formData,
|
|
})
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
if (data.status == "success") {
|
|
alert("Data berhasil diperbarui");
|
|
|
|
tutupSidebar();
|
|
|
|
loadSPBU();
|
|
loadObjekPeta();
|
|
}
|
|
});
|
|
}
|
|
|
|
function hapusSPBU(id) {
|
|
if (!modeAdmin) {
|
|
return;
|
|
}
|
|
|
|
if (!confirm("Yakin hapus data ini?")) {
|
|
return;
|
|
}
|
|
|
|
fetch("api/hapus_spbu.php", {
|
|
method: "POST",
|
|
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
|
|
body: JSON.stringify({
|
|
id: id,
|
|
}),
|
|
})
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
if (data.status == "success") {
|
|
alert("Data berhasil dihapus");
|
|
|
|
loadSPBU();
|
|
loadObjekPeta();
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener("keyup", function (e) {
|
|
if (e.target.id !== "search_spbu") return;
|
|
|
|
let keyword = e.target.value.toLowerCase();
|
|
|
|
markerGroup.eachLayer(function (marker) {
|
|
let nama = (marker.spbuData.nama_spbu || "").toLowerCase();
|
|
|
|
if (nama.includes(keyword)) {
|
|
map.setView(marker.getLatLng(), 18);
|
|
|
|
marker.openPopup();
|
|
}
|
|
});
|
|
});
|
|
|
|
function cariSPBU() {
|
|
let keyword = document.getElementById("search_spbu").value.toLowerCase();
|
|
|
|
let ditemukan = false;
|
|
|
|
markerGroup.eachLayer(function (marker) {
|
|
let nama = (marker.spbuData.nama_spbu || "").toLowerCase();
|
|
|
|
if (nama.includes(keyword)) {
|
|
ditemukan = true;
|
|
|
|
map.setView(marker.getLatLng(), 18);
|
|
|
|
marker.openPopup();
|
|
}
|
|
});
|
|
|
|
if (!ditemukan) {
|
|
alert("SPBU tidak ditemukan");
|
|
}
|
|
}
|
|
|
|
function lokasiSaya() {
|
|
if (!navigator.geolocation) {
|
|
alert("Browser tidak mendukung geolocation");
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
function (position) {
|
|
let lat = position.coords.latitude;
|
|
|
|
let lng = position.coords.longitude;
|
|
|
|
userLat = lat;
|
|
userLng = lng;
|
|
|
|
if (userMarker) {
|
|
map.removeLayer(userMarker);
|
|
}
|
|
|
|
userMarker = L.circleMarker([lat, lng], {
|
|
radius: 10,
|
|
color: "#2563eb",
|
|
fillColor: "#2563eb",
|
|
fillOpacity: 1,
|
|
}).addTo(map);
|
|
|
|
userMarker.bindPopup(`
|
|
<b>Lokasi Anda</b>
|
|
<br>
|
|
Lat : ${lat}
|
|
<br>
|
|
Lng : ${lng}
|
|
`);
|
|
|
|
userMarker.openPopup();
|
|
|
|
map.setView([lat, lng], 16);
|
|
},
|
|
|
|
function () {
|
|
alert("Lokasi tidak dapat diakses");
|
|
},
|
|
);
|
|
}
|
|
|
|
function hitungJarak(lat1, lon1, lat2, lon2) {
|
|
const R = 6371;
|
|
|
|
const dLat = ((lat2 - lat1) * Math.PI) / 180;
|
|
|
|
const dLon = ((lon2 - lon1) * Math.PI) / 180;
|
|
|
|
const a =
|
|
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|
Math.cos((lat1 * Math.PI) / 180) *
|
|
Math.cos((lat2 * Math.PI) / 180) *
|
|
Math.sin(dLon / 2) *
|
|
Math.sin(dLon / 2);
|
|
|
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
|
|
return R * c;
|
|
}
|
|
|
|
function cariTerdekat() {
|
|
if (userLat === null) {
|
|
alert("Klik Lokasi Saya terlebih dahulu");
|
|
|
|
return;
|
|
}
|
|
|
|
let terdekat = null;
|
|
|
|
let jarakMin = Infinity;
|
|
|
|
markerGroup.eachLayer(function (marker) {
|
|
let lat = marker.getLatLng().lat;
|
|
|
|
let lng = marker.getLatLng().lng;
|
|
|
|
let jarak = hitungJarak(userLat, userLng, lat, lng);
|
|
|
|
if (jarak < jarakMin) {
|
|
jarakMin = jarak;
|
|
|
|
terdekat = marker;
|
|
}
|
|
});
|
|
|
|
if (terdekat) {
|
|
map.setView(terdekat.getLatLng(), 18);
|
|
|
|
terdekat.openPopup();
|
|
|
|
alert(
|
|
"SPBU terdekat: " +
|
|
terdekat.spbuData.nama_spbu +
|
|
"\nJarak: " +
|
|
jarakMin.toFixed(2) +
|
|
" km",
|
|
);
|
|
}
|
|
}
|
|
|
|
function getMarkerTerdekat() {
|
|
let terdekat = null;
|
|
|
|
let jarakMin = Infinity;
|
|
|
|
markerGroup.eachLayer(function (marker) {
|
|
let lat = marker.getLatLng().lat;
|
|
|
|
let lng = marker.getLatLng().lng;
|
|
|
|
let jarak = hitungJarak(userLat, userLng, lat, lng);
|
|
|
|
if (jarak < jarakMin) {
|
|
jarakMin = jarak;
|
|
|
|
terdekat = marker;
|
|
}
|
|
});
|
|
|
|
return terdekat;
|
|
}
|
|
|
|
function buatRuteTerdekat() {
|
|
if (userLat === null) {
|
|
alert("Klik Lokasi Saya terlebih dahulu");
|
|
|
|
return;
|
|
}
|
|
|
|
let marker = getMarkerTerdekat();
|
|
|
|
if (!marker) {
|
|
alert("Tidak ada SPBU ditemukan");
|
|
|
|
return;
|
|
}
|
|
|
|
if (routingControl) {
|
|
map.removeControl(routingControl);
|
|
}
|
|
|
|
routingControl = L.Routing.control({
|
|
show: false,
|
|
|
|
collapsible: true,
|
|
waypoints: [
|
|
L.latLng(userLat, userLng),
|
|
|
|
L.latLng(marker.getLatLng().lat, marker.getLatLng().lng),
|
|
],
|
|
|
|
router: L.Routing.osrmv1({
|
|
serviceUrl: "https://router.project-osrm.org/route/v1",
|
|
}),
|
|
|
|
routeWhileDragging: false,
|
|
|
|
addWaypoints: false,
|
|
|
|
draggableWaypoints: false,
|
|
}).addTo(map);
|
|
}
|
|
|
|
document.addEventListener("change", function (e) {
|
|
if (e.target.id !== "foto") return;
|
|
|
|
let file = e.target.files[0];
|
|
|
|
if (!file) return;
|
|
|
|
let preview = document.getElementById("previewFoto");
|
|
|
|
preview.src = URL.createObjectURL(file);
|
|
|
|
preview.classList.remove("hidden");
|
|
});
|
|
|
|
document.addEventListener("change", function (e) {
|
|
if (e.target.id !== "edit_foto") return;
|
|
|
|
let file = e.target.files[0];
|
|
|
|
if (!file) return;
|
|
|
|
let preview = document.getElementById("preview_edit_foto");
|
|
|
|
preview.src = URL.createObjectURL(file);
|
|
|
|
preview.classList.remove("hidden");
|
|
});
|
|
|
|
document.addEventListener("change", function (e) {
|
|
if (e.target.id !== "edit_24jam") return;
|
|
|
|
let checked = e.target.checked;
|
|
|
|
document.getElementById("edit_jam_buka").disabled = checked;
|
|
|
|
document.getElementById("edit_jam_tutup").disabled = checked;
|
|
});
|
|
|
|
function isBuka(spbu) {
|
|
if (spbu.buka_24_jam == 1) {
|
|
return true;
|
|
}
|
|
|
|
if (!spbu.jam_buka || !spbu.jam_tutup) {
|
|
return false;
|
|
}
|
|
|
|
let now = new Date().toTimeString().substring(0, 5);
|
|
|
|
let buka = spbu.jam_buka.substring(0, 5);
|
|
|
|
let tutup = spbu.jam_tutup.substring(0, 5);
|
|
|
|
if (buka < tutup) {
|
|
return now >= buka && now <= tutup;
|
|
}
|
|
|
|
return now >= buka || now <= tutup;
|
|
}
|
|
|
|
function filterSPBU() {
|
|
let filter = document.getElementById("filter_spbu").value;
|
|
|
|
markerGroup.clearLayers();
|
|
|
|
Object.values(markerData).forEach(function (marker) {
|
|
let spbu = marker.spbuData;
|
|
|
|
let tampil = false;
|
|
|
|
if (filter == "all") {
|
|
tampil = true;
|
|
}
|
|
|
|
if (filter == "24" && spbu.buka_24_jam == 1) {
|
|
tampil = true;
|
|
}
|
|
|
|
if (filter == "non24" && spbu.buka_24_jam == 0) {
|
|
tampil = true;
|
|
}
|
|
|
|
if (filter == "buka" && isBuka(spbu)) {
|
|
tampil = true;
|
|
}
|
|
|
|
if (filter == "tutup" && !isBuka(spbu)) {
|
|
tampil = true;
|
|
}
|
|
|
|
if (tampil) {
|
|
marker.addTo(markerGroup);
|
|
}
|
|
});
|
|
}
|
|
|
|
function toggleMode() {
|
|
modeAdmin = !modeAdmin;
|
|
|
|
let btn = document.getElementById("btnMode");
|
|
|
|
let banner = document.getElementById("bannerMode");
|
|
|
|
if (modeAdmin) {
|
|
banner.classList.add("hidden");
|
|
|
|
btn.innerHTML = "Pindah ke Mode Lihat";
|
|
|
|
btn.classList.remove("bg-green-600");
|
|
|
|
btn.classList.add("bg-blue-600");
|
|
|
|
status.className =
|
|
"bg-blue-100 text-blue-700 px-3 py-2 rounded font-semibold";
|
|
} else {
|
|
banner.classList.remove("hidden");
|
|
|
|
btn.innerHTML = "Masuk Mode Admin";
|
|
|
|
btn.classList.remove("bg-blue-600");
|
|
|
|
btn.classList.add("bg-yellow-600");
|
|
|
|
status.innerHTML = "View";
|
|
|
|
status.className =
|
|
"bg-yellow-100 text-yellow-700 px-3 py-2 rounded font-semibold";
|
|
|
|
tutupSidebar();
|
|
|
|
map.closePopup();
|
|
}
|
|
loadSPBU();
|
|
loadObjekPeta();
|
|
updateModeUI();
|
|
}
|
|
|
|
function updateModeUI() {
|
|
let status = document.getElementById("statusMode");
|
|
|
|
let banner = document.getElementById("bannerMode");
|
|
|
|
if (modeAdmin) {
|
|
status.innerHTML = "🔓 ADMIN";
|
|
|
|
banner.classList.add("hidden");
|
|
} else {
|
|
status.innerHTML = "👁️ VIEW";
|
|
|
|
banner.classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
function loadObjekPeta() {
|
|
fetch("api/get_objek.php")
|
|
.then((res) => res.json())
|
|
|
|
.then((data) => {
|
|
drawnItems.clearLayers();
|
|
|
|
data.forEach((obj) => {
|
|
let geo = JSON.parse(obj.geojson);
|
|
|
|
let layer = L.geoJSON(geo);
|
|
|
|
layer.eachLayer(function (l) {
|
|
l.objekId = obj.id;
|
|
|
|
l.on("click", function (e) {
|
|
L.DomEvent.stopPropagation(e);
|
|
|
|
l.bindPopup(`
|
|
<b>${obj.nama || "-"}</b>
|
|
<br>
|
|
${obj.deskripsi || "-"}
|
|
`);
|
|
|
|
l.openPopup();
|
|
});
|
|
|
|
l.on("dblclick", function (e) {
|
|
L.DomEvent.stopPropagation(e);
|
|
|
|
if (!modeAdmin) {
|
|
return;
|
|
}
|
|
|
|
openObjekSidebar(obj, l);
|
|
});
|
|
|
|
drawnItems.addLayer(l);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
map.on(L.Draw.Event.CREATED, function (e) {
|
|
let layer = e.layer;
|
|
|
|
drawnItems.addLayer(layer);
|
|
|
|
currentObjekLayer = layer;
|
|
|
|
document.getElementById("sidebarObjek").classList.remove("hidden");
|
|
document.getElementById("objek_id").value = "";
|
|
document.getElementById("objek_nama").value = "";
|
|
document.getElementById("objek_deskripsi").value = "";
|
|
document.getElementById("objek_tipe").value = layer.toGeoJSON().geometry.type;
|
|
});
|
|
|
|
map.on("draw:edited", function (e) {
|
|
e.layers.eachLayer(function (layer) {
|
|
let geojson = JSON.stringify(layer.toGeoJSON());
|
|
|
|
fetch("api/update_objek.php", {
|
|
method: "POST",
|
|
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
},
|
|
|
|
body: "id=" + layer.objekId + "&geojson=" + encodeURIComponent(geojson),
|
|
});
|
|
});
|
|
});
|
|
|
|
map.on("draw:deleted", function (e) {
|
|
e.layers.eachLayer(function (layer) {
|
|
fetch("api/hapus_objek.php", {
|
|
method: "POST",
|
|
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
},
|
|
|
|
body: "id=" + layer.objekId,
|
|
});
|
|
});
|
|
});
|
|
|
|
function openObjekSidebar(obj, layer) {
|
|
currentObjekLayer = layer;
|
|
|
|
document.getElementById("sidebarObjek").classList.remove("hidden");
|
|
|
|
document.getElementById("objek_id").value = obj.id;
|
|
|
|
document.getElementById("objek_nama").value = obj.nama || "";
|
|
|
|
document.getElementById("objek_deskripsi").value = obj.deskripsi || "";
|
|
|
|
document.getElementById("objek_tipe").value = obj.tipe;
|
|
}
|
|
|
|
function tutupSidebarObjek() {
|
|
document.getElementById("sidebarObjek").classList.add("hidden");
|
|
|
|
currentObjekLayer = null;
|
|
}
|
|
|
|
function updateObjek() {
|
|
let id = document.getElementById("objek_id").value;
|
|
|
|
let nama = document.getElementById("objek_nama").value;
|
|
|
|
let deskripsi = document.getElementById("objek_deskripsi").value;
|
|
|
|
let tipe = document.getElementById("objek_tipe").value;
|
|
|
|
if (id == "") {
|
|
let geojson = JSON.stringify(currentObjekLayer.toGeoJSON());
|
|
|
|
fetch("api/simpan_objek.php", {
|
|
method: "POST",
|
|
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
},
|
|
|
|
body:
|
|
"nama=" +
|
|
encodeURIComponent(nama) +
|
|
"&deskripsi=" +
|
|
encodeURIComponent(deskripsi) +
|
|
"&tipe=" +
|
|
tipe +
|
|
"&geojson=" +
|
|
encodeURIComponent(geojson),
|
|
})
|
|
.then((res) => res.json())
|
|
|
|
.then((data) => {
|
|
alert("Objek berhasil disimpan");
|
|
|
|
tutupSidebarObjek();
|
|
|
|
loadObjekPeta();
|
|
});
|
|
} else {
|
|
fetch("api/update_objek.php", {
|
|
method: "POST",
|
|
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
},
|
|
|
|
body:
|
|
"id=" +
|
|
id +
|
|
"&nama=" +
|
|
encodeURIComponent(nama) +
|
|
"&deskripsi=" +
|
|
encodeURIComponent(deskripsi),
|
|
})
|
|
.then((res) => res.json())
|
|
|
|
.then((data) => {
|
|
alert("Objek berhasil diperbarui");
|
|
|
|
tutupSidebarObjek();
|
|
|
|
loadObjekPeta();
|
|
});
|
|
}
|
|
}
|