initialize

2026-06-11 13:11:51 +07:00
commit 48f20aabed
52 changed files with 11765 additions and 0 deletions
@@ -0,0 +1,213 @@
+// --- Fitur SPBU ---
+
+// Emoji Bubble Icon builder
+function makeSpbuIcon(is24) {
+    const cls = is24 ? 'spbu-24' : 'spbu-not24';
+    return L.divIcon({
+        className: '',
+        html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>⛽</span></div></div>`,
+        iconSize: [38, 38],
+        iconAnchor: [19, 38],
+        popupAnchor: [0, -40]
+    });
+}
+
+const spbuGreenIcon = makeSpbuIcon(true);
+const spbuRedIcon   = makeSpbuIcon(false);
+
+let isDrawingMode = false; // Akan diset true saat draw mode aktif (jalan/parsil)
+
+
+// Fetch SPBU
+function loadSpbu() {
+    spbuLayer.clearLayers();
+    fetch('api/spbu/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addSpbuMarker(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addSpbuMarker(item) {
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    const icon = makeSpbuIcon(item.is_24_jam);
+    const marker = L.marker([item.lat, item.lng], {
+        icon: icon,
+        draggable: isAdmin
+    });
+
+    marker.spbuData = item; // Simpan data di objek marker
+
+    // Hitung popupContent sekali saat marker dibuat
+    const d = item;
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditSpbuModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteSpbu(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">SPBU ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>No. WA:</b> ${d.no_wa}</p>
+            <p style="margin: 0 0 10px 0;"><b>Buka 24 Jam:</b> ${d.is_24_jam ? 'Ya' : 'Tidak'}</p>
+            ${actionButtons}
+        </div>
+    `;
+    marker.bindPopup(popupContent);
+
+    // Event drag untuk update koordinat
+    marker.on('dragend', function(e) {
+        const newPos = marker.getLatLng();
+        updateSpbu(item.id, item.nama, item.no_wa, item.is_24_jam, newPos.lat, newPos.lng);
+    });
+
+    spbuLayer.addLayer(marker);
+}
+
+// Map Click -> Form Add
+map.on('click', function(e) {
+    if (isDrawingMode) return; // Jangan muncul form jika sedang gambar garis/polygon
+    
+    // Hanya proses jika mode tambah SPBU aktif
+    if (window.currentAddMode === 'spbu') {
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}</label>
+            </div>
+            <div class="form-group">
+                <label>Nama SPBU</label>
+                <input type="text" id="modalSpbuNama" placeholder="Nama SPBU">
+            </div>
+            <div class="form-group">
+                <label>No. WA</label>
+                <input type="text" id="modalSpbuWa" placeholder="No. WA">
+            </div>
+            <div class="form-group">
+                <label>Buka 24 Jam?</label>
+                <div class="radio-group" style="margin-top:5px;">
+                    <label><input type="radio" name="modalSpbu24" value="1"> Ya</label>
+                    <label><input type="radio" name="modalSpbu24" value="0" checked> Tidak</label>
+                </div>
+            </div>
+        `;
+
+        openModal("Tambah SPBU Baru", bodyHTML, function() {
+            window.saveNewSpbu(e.latlng.lat, e.latlng.lng, 'modalSpbuNama', 'modalSpbuWa', 'modalSpbu24');
+        });
+
+        // Nonaktifkan mode tambah setelah modal muncul
+        window.deactivateAddMode();
+    }
+});
+
+window.saveNewSpbu = function(lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama SPBU harus diisi!");
+        return;
+    }
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    fetch('api/spbu/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.openEditSpbuModal = function(id) {
+    let d = null;
+    spbuLayer.eachLayer(function(layer) {
+        if (layer.spbuData && layer.spbuData.id == id) d = layer.spbuData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama SPBU</label>
+            <input type="text" id="editSpbuNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>No. WA</label>
+            <input type="text" id="editSpbuWa" value="${d.no_wa}">
+        </div>
+        <div class="form-group">
+            <label>Buka 24 Jam?</label>
+            <div class="radio-group" style="margin-top:5px;">
+                <label><input type="radio" name="editSpbu24" value="1" ${d.is_24_jam ? 'checked' : ''}> Ya</label>
+                <label><input type="radio" name="editSpbu24" value="0" ${!d.is_24_jam ? 'checked' : ''}> Tidak</label>
+            </div>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit SPBU", bodyHTML, function() {
+        window.saveEditSpbu(d.id, d.lat, d.lng, 'editSpbuNama', 'editSpbuWa', 'editSpbu24');
+    });
+};
+
+window.saveEditSpbu = function(id, lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    updateSpbu(id, nama, no_wa, is_24_jam, lat, lng);
+};
+
+function updateSpbu(id, nama, no_wa, is_24_jam, lat, lng) {
+    fetch('api/spbu/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+}
+
+window.deleteSpbu = function(id) {
+    openConfirmModal("Yakin hapus SPBU ini?", function() {
+        fetch('api/spbu/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadSpbu();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+// Initial Load
+loadSpbu();