feat: implement full CRUD functionality for jalan, parsil, and spbu modules including database integration and map interaction features

2026-06-11 16:40:58 +07:00
parent d10253a001
commit 0ae903c0d1
38 changed files with 3098 additions and 2578 deletions
@@ -0,0 +1,179 @@
+// Inisialisasi Peta Jalan
+// Koordinat awal: [-0.0263, 109.3425] (Pontianak)
+const map = L.map("map", { zoomControl: false }).setView(
+	[-0.0263, 109.3425],
+	13,
+);
+
+// ===== Toast Notification =====
+window.showToast = function (message, type = "success", duration = 3500) {
+	const icons = { success: "✅", error: "❌", info: "ℹ️", warning: "⚠️" };
+	const container = document.getElementById("toastContainer");
+	if (!container) return;
+
+	const toast = document.createElement("div");
+	toast.className = `toast toast-${type}`;
+	toast.innerHTML = `<span class="toast-icon">${icons[type] || "ℹ️"}</span><span>${message}</span>`;
+	container.appendChild(toast);
+
+	setTimeout(() => {
+		toast.classList.add("hiding");
+		toast.addEventListener("animationend", () => toast.remove());
+	}, duration);
+};
+
+// Custom Zoom Control Logic
+document.getElementById("zoomInBtn").addEventListener("click", function () {
+	map.zoomIn();
+});
+document.getElementById("zoomOutBtn").addEventListener("click", function () {
+	map.zoomOut();
+});
+
+// Base Map dari OpenStreetMap
+L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+	attribution:
+		'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+}).addTo(map);
+
+// Inisialisasi FeatureGroups untuk masing-masing layer
+const jalanLayer = L.featureGroup().addTo(map);
+
+const searchInput = document.getElementById("searchInput");
+const searchClear = document.getElementById("searchClear");
+
+searchInput.addEventListener("focus", function () {
+	if (typeof window.deactivateAddMode === "function")
+		window.deactivateAddMode();
+});
+
+searchInput.addEventListener("input", function () {
+	const val = this.value.toLowerCase();
+	if (val.length > 0) {
+		searchClear.style.visibility = "visible";
+		window.showSearchResults(val);
+	} else {
+		searchClear.style.visibility = "hidden";
+		document.getElementById("searchResults").style.display = "none";
+	}
+});
+
+searchClear.addEventListener("click", function () {
+	searchInput.value = "";
+	searchClear.style.visibility = "hidden";
+	document.getElementById("searchResults").style.display = "none";
+	searchInput.focus();
+});
+
+// UI Logic: Custom Layer Control Toggle
+const layerBtn = document.getElementById("layerBtn");
+const layerPanel = document.getElementById("layerPanel");
+
+if (layerBtn && layerPanel) {
+	layerBtn.addEventListener("click", function () {
+		if (typeof window.deactivateAddMode === "function")
+			window.deactivateAddMode();
+		layerPanel.style.display =
+			layerPanel.style.display === "block" ? "none" : "block";
+	});
+}
+
+// Sembunyikan layer panel saat klik di peta
+map.on("click", function () {
+	if (layerPanel) layerPanel.style.display = "none";
+});
+
+// Logic untuk Toggle Layer Visibility
+const setupLayerToggle = (id, layer) => {
+	const el = document.getElementById(id);
+	if (el) {
+		el.addEventListener("change", function (e) {
+			e.target.checked ? map.addLayer(layer) : map.removeLayer(layer);
+		});
+	}
+};
+
+setupLayerToggle("layerJalan", jalanLayer);
+
+// --- Sub-layer Toggle (expand/collapse) ---
+window.toggleSubLayer = function (subId, iconEl) {
+	const sub = document.getElementById(subId);
+	if (!sub) return;
+	const isHidden = sub.style.display === "none";
+	sub.style.display = isHidden ? "" : "none";
+	iconEl.classList.toggle("collapsed", !isHidden);
+};
+
+// --- Sub-layer Filter ---
+window.applySubFilter = function (type) {
+	if (type === "jalan") {
+		const checked = [...document.querySelectorAll(".sub-jalan:checked")].map(
+			(el) => el.value,
+		);
+		jalanLayer.eachLayer((layer) => {
+			if (!layer.jalanData) return;
+			const visible = checked.includes(layer.jalanData.status);
+			layer.setStyle({ opacity: visible ? 1 : 0, fillOpacity: visible ? 0.5 : 0 });
+		});
+	}
+};
+
+// --- Modal Logic ---
+const unifiedModal = document.getElementById("unifiedModal");
+const modalTitle   = document.getElementById("modalTitle");
+const modalBody    = document.getElementById("modalBody");
+
+window.openModal = function (title, bodyHTML, saveCallback) {
+	if (!unifiedModal) return;
+	modalTitle.textContent = title;
+	modalBody.innerHTML = bodyHTML;
+	unifiedModal.classList.add("show");
+
+	const currentSaveBtn = document.getElementById("modalSaveBtn");
+	if (currentSaveBtn) {
+		const newSaveBtn = currentSaveBtn.cloneNode(true);
+		currentSaveBtn.parentNode.replaceChild(newSaveBtn, currentSaveBtn);
+		newSaveBtn.addEventListener("click", saveCallback);
+	}
+};
+
+window.closeModal = function () {
+	if (unifiedModal) unifiedModal.classList.remove("show");
+};
+
+const confirmModal   = document.getElementById("confirmModal");
+const confirmMessage = document.getElementById("confirmMessage");
+
+window.openConfirmModal = function (msg, confirmCallback) {
+	if (!confirmModal) return;
+	confirmMessage.textContent = msg;
+	confirmModal.classList.add("show");
+
+	const currentYesBtn = document.getElementById("confirmYesBtn");
+	if (currentYesBtn) {
+		const newYesBtn = currentYesBtn.cloneNode(true);
+		currentYesBtn.parentNode.replaceChild(newYesBtn, currentYesBtn);
+		newYesBtn.addEventListener("click", function () {
+			confirmModal.classList.remove("show");
+			confirmCallback();
+		});
+	}
+};
+
+window.closeConfirmModal = function () {
+	if (confirmModal) confirmModal.classList.remove("show");
+};
+
+// --- Add Mode (untuk draw control) ---
+window.currentDrawMode = null;
+window.activeDrawHandler = null;
+
+window.deactivateAddMode = function () {
+	if (window.activeDrawHandler) {
+		try { window.activeDrawHandler.disable(); } catch(e) {}
+		window.activeDrawHandler = null;
+	}
+	window.currentDrawMode = null;
+	document.getElementById("map").style.cursor = "";
+};
+