const state = { map: null, mapProvider: "", markers: new Map(), infoOverlay: null, drivers: new Map(), locations: new Map(), selectedDriverId: "", eventSource: null, activeView: "locations", adminToken: new URLSearchParams(window.location.search).get("adminToken") || window.localStorage.getItem("cargoRadarAdminToken") || "" }; const elements = { connectionStatus: document.getElementById("connectionStatus"), refreshButton: document.getElementById("refreshButton"), demoButton: document.getElementById("demoButton"), locationsTab: document.getElementById("locationsTab"), driversTab: document.getElementById("driversTab"), locationsPanel: document.getElementById("locationsPanel"), driversPanel: document.getElementById("driversPanel"), vehicleList: document.getElementById("vehicleList"), mapMessage: document.getElementById("mapMessage"), totalCount: document.getElementById("totalCount"), activeCount: document.getElementById("activeCount"), staleCount: document.getElementById("staleCount"), lastUpdated: document.getElementById("lastUpdated"), driverForm: document.getElementById("driverForm"), driverNameInput: document.getElementById("driverNameInput"), vehicleNoInput: document.getElementById("vehicleNoInput"), phoneInput: document.getElementById("phoneInput"), driverIdInput: document.getElementById("driverIdInput"), driverCount: document.getElementById("driverCount"), driverList: document.getElementById("driverList"), historyDrawer: document.getElementById("historyDrawer"), historyCloseButton: document.getElementById("historyCloseButton"), historyTitle: document.getElementById("historyTitle"), historySummary: document.getElementById("historySummary"), historyList: document.getElementById("historyList") }; document.addEventListener("DOMContentLoaded", () => { initializeMap(); bindActions(); refreshDrivers(); refreshLatestLocations(); connectEvents(); }); async function initializeMap() { const kakaoJavaScriptKey = window.CARGORADAR_CONFIG?.kakaoJavaScriptKey || ""; if (kakaoJavaScriptKey) { try { await loadKakaoMapsSdk(kakaoJavaScriptKey); const center = new kakao.maps.LatLng(36.45, 127.85); state.map = new kakao.maps.Map(document.getElementById("map"), { center, level: 13 }); state.mapProvider = "kakao"; state.map.addControl(new kakao.maps.ZoomControl(), kakao.maps.ControlPosition.RIGHT); state.map.addControl(new kakao.maps.MapTypeControl(), kakao.maps.ControlPosition.TOPRIGHT); hideMapMessage(); updateMarkers({ fitBounds: state.locations.size > 0 }); return; } catch (error) { console.warn("Kakao map unavailable. Falling back to OpenStreetMap.", error); } } try { await initializeLeafletMap(); } catch (error) { console.error(error); showMapMessage("지도 로딩에 실패했습니다. 네트워크 상태를 확인하세요."); } } function loadKakaoMapsSdk(appKey) { return new Promise((resolve, reject) => { if (window.kakao?.maps) { kakao.maps.load(resolve); return; } const script = document.createElement("script"); script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${encodeURIComponent(appKey)}&autoload=false`; script.async = true; script.onload = () => { if (!window.kakao?.maps) { reject(new Error("kakao_maps_not_authorized")); return; } kakao.maps.load(resolve); }; script.onerror = () => reject(new Error("kakao_maps_load_failed")); document.head.appendChild(script); }); } async function initializeLeafletMap() { await loadLeafletAssets(); state.mapProvider = "leaflet"; state.map = L.map("map", { attributionControl: true, zoomControl: true }).setView([36.45, 127.85], 7); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(state.map); showMapMessage("카카오맵 권한 전까지 OpenStreetMap으로 표시 중"); window.setTimeout(hideMapMessage, 4500); updateMarkers({ fitBounds: state.locations.size > 0 }); } function loadLeafletAssets() { if (window.L?.map) return Promise.resolve(); const version = "1.9.4"; const stylesheet = loadStylesheet( "leaflet-stylesheet", `https://unpkg.com/leaflet@${version}/dist/leaflet.css` ); const script = loadScript( "leaflet-script", `https://unpkg.com/leaflet@${version}/dist/leaflet.js` ); return Promise.all([stylesheet, script]).then(() => { if (!window.L?.map) throw new Error("leaflet_load_failed"); }); } function loadStylesheet(id, href) { return new Promise((resolve, reject) => { if (document.getElementById(id)) { resolve(); return; } const link = document.createElement("link"); link.id = id; link.rel = "stylesheet"; link.href = href; link.onload = resolve; link.onerror = () => reject(new Error(`${id}_load_failed`)); document.head.appendChild(link); }); } function loadScript(id, src) { return new Promise((resolve, reject) => { if (document.getElementById(id)) { resolve(); return; } const script = document.createElement("script"); script.id = id; script.src = src; script.async = true; script.onload = resolve; script.onerror = () => reject(new Error(`${id}_load_failed`)); document.head.appendChild(script); }); } function bindActions() { elements.refreshButton.addEventListener("click", refreshLatestLocations); elements.demoButton.addEventListener("click", postDemoLocation); elements.locationsTab.addEventListener("click", () => setActiveView("locations")); elements.driversTab.addEventListener("click", () => setActiveView("drivers")); elements.driverForm.addEventListener("submit", submitDriverForm); elements.historyCloseButton.addEventListener("click", closeHistoryDrawer); } function setActiveView(view) { state.activeView = view; elements.locationsTab.classList.toggle("is-active", view === "locations"); elements.driversTab.classList.toggle("is-active", view === "drivers"); elements.locationsPanel.classList.toggle("is-hidden", view !== "locations"); elements.driversPanel.classList.toggle("is-hidden", view !== "drivers"); } async function refreshLatestLocations() { try { setConnectionStatus("연결됨", "online"); const data = await fetchJson("/api/v1/locations/latest", { headers: adminHeaders() }); replaceLocations(data.locations || []); } catch (error) { console.error(error); if (error.message === "invalid_admin_token") { requestAdminToken(); return; } setConnectionStatus("조회 실패", "error"); } } async function refreshDrivers() { try { const data = await fetchJson("/api/v1/drivers", { headers: adminHeaders() }); replaceDrivers(data.drivers || []); } catch (error) { console.error(error); if (error.message === "invalid_admin_token") { requestAdminToken(); } } } function connectEvents() { if (state.eventSource) { state.eventSource.close(); } state.eventSource = new EventSource(withAdminToken("/api/v1/events")); state.eventSource.addEventListener("open", () => setConnectionStatus("실시간 연결", "online")); state.eventSource.addEventListener("snapshot", (event) => { const payload = JSON.parse(event.data); replaceLocations(payload.locations || []); }); state.eventSource.addEventListener("location.updated", (event) => { upsertLocation(JSON.parse(event.data), { focus: true }); }); state.eventSource.addEventListener("drivers.updated", (event) => { const payload = JSON.parse(event.data); replaceDrivers(payload.drivers || []); }); state.eventSource.addEventListener("error", () => setConnectionStatus("재연결 중", "error")); } async function postDemoLocation() { const driver = getDemoDriver(); const now = Date.now(); const latitude = 37.5665 + Math.sin(now / 60000) * 0.03; const longitude = 126.978 + Math.cos(now / 60000) * 0.04; try { await fetchJson("/api/v1/locations", { method: "POST", headers: { "Content-Type": "application/json", "X-Device-Token": driver.token }, body: JSON.stringify({ driverId: driver.driverId, vehicleNo: driver.vehicleNo, latitude, longitude, accuracy: 12, speed: 42, heading: Math.round((now / 1000) % 360), cargoName: "전자부품", cargoWeight: "1.2t", origin: "서울 상차지", destination: "평택 물류센터", provider: "demo", recordedAt: new Date().toISOString() }) }); } catch (error) { console.error(error); setConnectionStatus("전송 실패", "error"); } } function getDemoDriver() { const enabledDriver = [...state.drivers.values()].find((driver) => driver.enabled && driver.token); return enabledDriver || { driverId: "demo-driver", vehicleNo: "SEOUL-12-3456", token: "demo-token" }; } function replaceLocations(locations) { state.locations.clear(); for (const location of locations) { state.locations.set(location.driverId, location); } render(); updateMarkers({ fitBounds: locations.length > 0 }); } function replaceDrivers(drivers) { state.drivers.clear(); for (const driver of drivers) { state.drivers.set(driver.driverId, driver); } renderDrivers(); } function upsertLocation(location, options = {}) { state.locations.set(location.driverId, location); render(); updateMarker(location); if (state.selectedDriverId === location.driverId && !elements.historyDrawer.classList.contains("is-hidden")) { loadLocationHistory(location); } if (options.focus) { centerMapOnLocation(location); } } function render() { const locations = [...state.locations.values()].sort((left, right) => { return new Date(right.receivedAt).getTime() - new Date(left.receivedAt).getTime(); }); const counts = locations.reduce( (accumulator, location) => { const status = getLocationStatus(location); accumulator.total += 1; if (status.key === "active") accumulator.active += 1; if (status.key !== "active") accumulator.stale += 1; return accumulator; }, { total: 0, active: 0, stale: 0 } ); elements.totalCount.textContent = String(counts.total); elements.activeCount.textContent = String(counts.active); elements.staleCount.textContent = String(counts.stale); elements.lastUpdated.textContent = locations[0] ? formatDateTime(locations[0].receivedAt) : "-"; elements.vehicleList.replaceChildren(); if (!locations.length) { const empty = document.createElement("div"); empty.className = "empty-state"; empty.textContent = "수신된 차량 위치가 없습니다."; elements.vehicleList.append(empty); return; } for (const location of locations) { elements.vehicleList.append(createVehicleItem(location)); } } function renderDrivers() { const drivers = [...state.drivers.values()].sort((left, right) => { return String(left.vehicleNo || left.driverId).localeCompare(String(right.vehicleNo || right.driverId), "ko"); }); elements.driverCount.textContent = `${drivers.length}명`; elements.driverList.replaceChildren(); if (!drivers.length) { const empty = document.createElement("div"); empty.className = "empty-state"; empty.textContent = "등록된 기사가 없습니다."; elements.driverList.append(empty); return; } for (const driver of drivers) { elements.driverList.append(createDriverItem(driver)); } } function createVehicleItem(location) { const status = getLocationStatus(location); const item = document.createElement("article"); item.className = "vehicle-item"; item.tabIndex = 0; const main = document.createElement("div"); main.className = "vehicle-main"; const title = document.createElement("div"); title.className = "vehicle-title"; const badge = document.createElement("span"); badge.className = `badge ${status.key}`; badge.textContent = status.label; const vehicleNo = document.createElement("strong"); vehicleNo.textContent = location.vehicleNo || location.driverId; title.append(badge, vehicleNo); const meta = document.createElement("div"); meta.className = "vehicle-meta"; meta.textContent = `${location.driverName || location.driverId} · ${formatDateTime(location.receivedAt)} · ${formatCoordinate(location.latitude)}, ${formatCoordinate(location.longitude)}`; const speed = document.createElement("div"); speed.className = "speed"; speed.textContent = location.speed === null || location.speed === undefined ? "-" : `${Math.round(location.speed)} km/h`; main.append(title, meta); item.append(main, speed); item.addEventListener("click", () => focusLocation(location)); item.addEventListener("keydown", (event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); focusLocation(location); } }); return item; } function createDriverItem(driver) { const item = document.createElement("article"); item.className = "driver-item"; const head = document.createElement("div"); head.className = "driver-head"; const title = document.createElement("div"); title.className = "driver-title"; const name = document.createElement("strong"); name.textContent = `${driver.vehicleNo || driver.driverId} · ${driver.name}`; const meta = document.createElement("div"); meta.className = "vehicle-meta"; meta.textContent = [driver.driverId, driver.phone].filter(Boolean).join(" · "); title.append(name, meta); const badge = document.createElement("span"); badge.className = `badge ${driver.enabled ? "active" : "offline"}`; badge.textContent = driver.enabled ? "사용" : "중지"; head.append(title, badge); const tokenRow = document.createElement("div"); tokenRow.className = "driver-token"; const token = document.createElement("code"); token.textContent = driver.token || "-"; const copyButton = document.createElement("button"); copyButton.type = "button"; copyButton.textContent = "복사"; copyButton.addEventListener("click", () => copyToken(driver.token)); tokenRow.append(token, copyButton); const actions = document.createElement("div"); actions.className = "driver-actions"; const toggleButton = document.createElement("button"); toggleButton.type = "button"; toggleButton.textContent = driver.enabled ? "중지" : "사용"; toggleButton.addEventListener("click", () => updateDriver(driver.driverId, { enabled: !driver.enabled })); const tokenButton = document.createElement("button"); tokenButton.type = "button"; tokenButton.textContent = "토큰 재발급"; tokenButton.addEventListener("click", () => updateDriver(driver.driverId, { regenerateToken: true })); const deleteButton = document.createElement("button"); deleteButton.type = "button"; deleteButton.textContent = "삭제"; deleteButton.addEventListener("click", () => deleteDriver(driver)); actions.append(toggleButton, tokenButton, deleteButton); item.append(head, tokenRow, actions); return item; } async function submitDriverForm(event) { event.preventDefault(); const payload = { name: elements.driverNameInput.value.trim(), vehicleNo: elements.vehicleNoInput.value.trim(), phone: elements.phoneInput.value.trim(), driverId: elements.driverIdInput.value.trim() }; try { await fetchJson("/api/v1/drivers", { method: "POST", headers: { "Content-Type": "application/json", ...adminHeaders() }, body: JSON.stringify(payload) }); elements.driverForm.reset(); await refreshDrivers(); } catch (error) { console.error(error); window.alert(`등록 실패: ${error.message}`); } } async function updateDriver(driverId, patch) { try { const data = await fetchJson(`/api/v1/drivers/${encodeURIComponent(driverId)}`, { method: "PATCH", headers: { "Content-Type": "application/json", ...adminHeaders() }, body: JSON.stringify(patch) }); state.drivers.set(data.driver.driverId, data.driver); renderDrivers(); } catch (error) { console.error(error); window.alert(`수정 실패: ${error.message}`); } } async function deleteDriver(driver) { const confirmed = window.confirm(`${driver.vehicleNo || driver.driverId} 삭제`); if (!confirmed) return; try { await fetchJson(`/api/v1/drivers/${encodeURIComponent(driver.driverId)}`, { method: "DELETE", headers: adminHeaders() }); state.drivers.delete(driver.driverId); renderDrivers(); } catch (error) { console.error(error); window.alert(`삭제 실패: ${error.message}`); } } async function copyToken(token) { if (!token) return; try { await navigator.clipboard.writeText(token); setConnectionStatus("토큰 복사됨", "online"); } catch { window.prompt("기기 토큰", token); } } function updateMarkers({ fitBounds = false } = {}) { if (!state.map || !state.mapProvider) return; const activeIds = new Set(state.locations.keys()); for (const [driverId, marker] of state.markers) { if (!activeIds.has(driverId)) { removeMarker(marker); state.markers.delete(driverId); } } for (const location of state.locations.values()) { updateMarker(location); } if (fitBounds && state.markers.size > 0) { fitMapToLocations(); } } function updateMarker(location) { if (!state.map || !state.mapProvider) return; if (state.mapProvider === "leaflet") { updateLeafletMarker(location); return; } updateKakaoMarker(location); } function updateKakaoMarker(location) { const position = new kakao.maps.LatLng(location.latitude, location.longitude); const status = getLocationStatus(location); const markerElement = createTruckMarkerElement(location, status); let marker = state.markers.get(location.driverId); if (!marker) { marker = { provider: "kakao", overlay: new kakao.maps.CustomOverlay({ position, content: markerElement, yAnchor: 1 }) }; marker.overlay.setMap(state.map); state.markers.set(location.driverId, marker); } else { marker.overlay.setPosition(position); marker.overlay.setContent(markerElement); } } function updateLeafletMarker(location) { const status = getLocationStatus(location); const position = [location.latitude, location.longitude]; const icon = L.divIcon({ className: `leaflet-truck-marker truck-marker ${status.key}`, html: createTruckMarkerHtml(location, status), iconSize: [58, 34], iconAnchor: [29, 34], popupAnchor: [0, -30] }); let marker = state.markers.get(location.driverId); if (!marker) { marker = { provider: "leaflet", marker: L.marker(position, { icon, title: location.vehicleNo || location.driverId }) }; marker.marker.on("click", () => focusLocation(location)); marker.marker.addTo(state.map); state.markers.set(location.driverId, marker); } else { marker.marker.setLatLng(position); marker.marker.setIcon(icon); marker.marker.off("click"); marker.marker.on("click", () => focusLocation(location)); } } function createTruckMarkerElement(location, status) { const markerElement = document.createElement("button"); markerElement.className = `truck-marker ${status.key}`; markerElement.type = "button"; markerElement.title = location.vehicleNo || location.driverId; markerElement.setAttribute("aria-label", `${location.vehicleNo || location.driverId} 위치 보기`); markerElement.innerHTML = createTruckMarkerHtml(location, status); markerElement.addEventListener("click", () => focusLocation(location)); return markerElement; } function createTruckMarkerHtml(location) { const label = location.vehicleNo ? location.vehicleNo.slice(-4) : location.driverId.slice(0, 4); return ` ${escapeHtml(label)} `; } function removeMarker(marker) { if (marker.provider === "kakao") { marker.overlay.setMap(null); return; } if (marker.provider === "leaflet") { marker.marker.remove(); } } function fitMapToLocations() { if (state.mapProvider === "kakao") { const bounds = new kakao.maps.LatLngBounds(); for (const location of state.locations.values()) { bounds.extend(new kakao.maps.LatLng(location.latitude, location.longitude)); } state.map.setBounds(bounds); return; } if (state.mapProvider === "leaflet") { const bounds = L.latLngBounds([...state.locations.values()].map((location) => { return [location.latitude, location.longitude]; })); state.map.fitBounds(bounds, { maxZoom: 14, padding: [40, 40] }); } } function centerMapOnLocation(location, options = {}) { if (!state.map || !state.mapProvider) return; if (state.mapProvider === "kakao") { const position = new kakao.maps.LatLng(location.latitude, location.longitude); state.map.setCenter(position); if (options.zoom && state.map.getLevel() > 4) { state.map.setLevel(4); } return; } if (state.mapProvider === "leaflet") { const nextZoom = options.zoom ? Math.max(state.map.getZoom(), 14) : state.map.getZoom(); state.map.setView([location.latitude, location.longitude], nextZoom, { animate: true }); } } function focusLocation(location) { loadLocationHistory(location); if (!state.map || !state.mapProvider) return; centerMapOnLocation(location, { zoom: true }); showInfoOverlay(location); } async function loadLocationHistory(location) { state.selectedDriverId = location.driverId; elements.historyDrawer.classList.remove("is-hidden"); elements.historyTitle.textContent = `${location.vehicleNo || location.driverId} 위치 이력`; elements.historySummary.textContent = "조회 중"; elements.historyList.replaceChildren(); try { const data = await fetchJson( `/api/v1/locations/history?driverId=${encodeURIComponent(location.driverId)}&limit=80`, { headers: adminHeaders() } ); renderHistory(location, data.locations || []); } catch (error) { console.error(error); elements.historySummary.textContent = `조회 실패: ${error.message}`; } } function renderHistory(location, records) { elements.historyList.replaceChildren(); elements.historySummary.textContent = `${records.length}건 · ${location.driverName || location.driverId}`; if (!records.length) { const empty = document.createElement("div"); empty.className = "empty-state"; empty.textContent = "위치 이력이 없습니다."; elements.historyList.append(empty); return; } for (const record of records.reverse()) { const row = document.createElement("div"); row.className = "history-row"; const time = document.createElement("time"); time.textContent = formatTime(record.receivedAt); const coordinate = document.createElement("span"); coordinate.textContent = `${formatCoordinate(record.latitude)}, ${formatCoordinate(record.longitude)}`; const speed = document.createElement("span"); speed.textContent = record.speed === null || record.speed === undefined ? "-" : `${Math.round(record.speed)} km/h`; row.append(time, coordinate, speed); elements.historyList.append(row); } } function closeHistoryDrawer() { state.selectedDriverId = ""; elements.historyDrawer.classList.add("is-hidden"); } function showInfoOverlay(location) { const status = getLocationStatus(location); const content = createPopupElement(location, status); if (state.mapProvider === "leaflet") { state.infoOverlay = L.popup({ closeButton: true, offset: [0, -24] }) .setLatLng([location.latitude, location.longitude]) .setContent(content) .openOn(state.map); return; } const position = new kakao.maps.LatLng(location.latitude, location.longitude); if (!state.infoOverlay) { state.infoOverlay = new kakao.maps.CustomOverlay({ yAnchor: 1.35 }); } state.infoOverlay.setContent(content); state.infoOverlay.setPosition(position); state.infoOverlay.setMap(state.map); } function createPopupElement(location, status) { const container = document.createElement("div"); container.className = "kakao-popup"; const title = document.createElement("strong"); title.className = "popup-title"; title.textContent = location.vehicleNo || location.driverId; const driver = document.createElement("div"); driver.textContent = `${location.driverName || location.driverId} · ${status.label}`; const cargo = document.createElement("div"); cargo.className = "popup-cargo"; cargo.textContent = `화물: ${getCargoSummary(location)}`; const destination = document.createElement("div"); destination.textContent = getRouteSummary(location); const receivedAt = document.createElement("div"); receivedAt.textContent = `수신: ${formatDateTime(location.receivedAt)}`; const movement = document.createElement("div"); movement.textContent = `속도: ${formatSpeed(location.speed)}`; container.append(title, driver, cargo, destination, movement, receivedAt); return container; } async function fetchJson(url, options) { const response = await fetch(url, options); const data = await response.json().catch(() => ({})); if (!response.ok) { throw new Error(data.error || `HTTP ${response.status}`); } return data; } function adminHeaders() { return state.adminToken ? { "X-Admin-Token": state.adminToken } : {}; } function withAdminToken(url) { if (!state.adminToken) return url; const parsedUrl = new URL(url, window.location.origin); parsedUrl.searchParams.set("adminToken", state.adminToken); return `${parsedUrl.pathname}${parsedUrl.search}`; } function requestAdminToken() { const token = window.prompt("관리자 토큰"); if (!token) { setConnectionStatus("토큰 필요", "error"); return; } state.adminToken = token.trim(); window.localStorage.setItem("cargoRadarAdminToken", state.adminToken); refreshDrivers(); refreshLatestLocations(); connectEvents(); } function setConnectionStatus(text, mode) { elements.connectionStatus.textContent = text; elements.connectionStatus.classList.toggle("is-online", mode === "online"); elements.connectionStatus.classList.toggle("is-error", mode === "error"); } function showMapMessage(text) { elements.mapMessage.textContent = text; elements.mapMessage.classList.remove("is-hidden"); } function hideMapMessage() { elements.mapMessage.classList.add("is-hidden"); } function getLocationStatus(location) { const receivedAt = new Date(location.receivedAt).getTime(); const ageMs = Date.now() - receivedAt; if (ageMs <= 2 * 60 * 1000) return { key: "active", label: "수신중" }; if (ageMs <= 10 * 60 * 1000) return { key: "stale", label: "지연" }; return { key: "offline", label: "미수신" }; } function formatDateTime(value) { const date = new Date(value); if (Number.isNaN(date.getTime())) return "-"; return new Intl.DateTimeFormat("ko-KR", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }).format(date); } function formatTime(value) { const date = new Date(value); if (Number.isNaN(date.getTime())) return "-"; return new Intl.DateTimeFormat("ko-KR", { hour: "2-digit", minute: "2-digit", second: "2-digit" }).format(date); } function formatSpeed(value) { if (value === null || value === undefined || value === "") return "-"; const speed = Number(value); if (!Number.isFinite(speed)) return "-"; return `${Math.round(speed)} km/h`; } function formatCoordinate(value) { return Number(value).toFixed(5); } function getCargoSummary(location) { const cargoName = firstString(location.cargoName, location.cargoItem, location.cargo, location.itemName); const cargoWeight = firstString(location.cargoWeight, location.weight); return [cargoName, cargoWeight].filter(Boolean).join(" · ") || "미등록"; } function getRouteSummary(location) { const origin = firstString(location.origin, location.departure); const destination = firstString(location.destination, location.arrival); if (origin && destination) return `구간: ${origin} -> ${destination}`; if (destination) return `도착지: ${destination}`; if (origin) return `상차지: ${origin}`; return "도착지: 미등록"; } function firstString(...values) { for (const value of values) { if (value === undefined || value === null) continue; const text = String(value).trim(); if (text) return text; } return ""; } function escapeHtml(value) { return String(value) .replaceAll("&", "&") .replaceAll("<", "<") .replaceAll(">", ">") .replaceAll('"', """) .replaceAll("'", "'"); }