planet/frontend/public/earth/js/ui.js

// ui.js - UI update functions

let statusTimeoutId = null;
let statusHideTimeoutId = null;
let statusReplayTimeoutId = null;
const STATUS_BASE_CLASS = "earth-status-message";

function getElement(id) {
  return document.getElementById(id);
}

function setElementDisplay(element, visible, displayValue = "block") {
  if (!element) return;
  element.style.display = visible ? displayValue : "none";
}

function clearStatusTimers() {
  if (statusTimeoutId) {
    clearTimeout(statusTimeoutId);
    statusTimeoutId = null;
  }

  if (statusHideTimeoutId) {
    clearTimeout(statusHideTimeoutId);
    statusHideTimeoutId = null;
  }

  if (statusReplayTimeoutId) {
    clearTimeout(statusReplayTimeoutId);
    statusReplayTimeoutId = null;
  }
}

// Show status message
export function showStatusMessage(message, type = "info") {
  const statusEl = getElement("status-message");
  if (!statusEl) return;

  clearStatusTimers();

  const startShow = () => {
    statusEl.textContent = message;
    statusEl.className = `${STATUS_BASE_CLASS} ${type}`;
    setElementDisplay(statusEl, true);
    statusEl.offsetHeight;
    statusEl.classList.add("visible");

    statusTimeoutId = setTimeout(() => {
      statusEl.classList.remove("visible");
      statusHideTimeoutId = setTimeout(() => {
        setElementDisplay(statusEl, false);
        statusEl.textContent = "";
        statusHideTimeoutId = null;
      }, 280);
      statusTimeoutId = null;
    }, 3000);
  };

  if (statusEl.classList.contains("visible")) {
    statusEl.classList.remove("visible");
    statusReplayTimeoutId = setTimeout(() => {
      startShow();
      statusReplayTimeoutId = null;
    }, 180);
    return;
  }

  startShow();
}

// Update coordinates display
export function updateCoordinatesDisplay(lat, lon, alt = 0) {
  const longitudeEl = getElement("longitude-value");
  const latitudeEl = getElement("latitude-value");
  const mouseCoordsEl = getElement("mouse-coords");

  if (longitudeEl) longitudeEl.textContent = lon.toFixed(2) + "°";
  if (latitudeEl) latitudeEl.textContent = lat.toFixed(2) + "°";
  if (mouseCoordsEl) {
    mouseCoordsEl.textContent = `鼠标: ${lat.toFixed(2)}°, ${lon.toFixed(2)}°`;
  }
}

// Update zoom display
export function updateZoomDisplay(zoomLevel, distance) {
  const percent = Math.round(zoomLevel * 100);
  const zoomValueEl = getElement("zoom-value");
  const zoomLevelEl = getElement("zoom-level");
  const slider = getElement("zoom-slider");
  const cameraDistanceEl = getElement("camera-distance");

  if (zoomValueEl) zoomValueEl.textContent = percent + "%";
  if (zoomLevelEl) zoomLevelEl.textContent = "缩放: " + percent + "%";
  if (slider) slider.value = zoomLevel;
  if (cameraDistanceEl) cameraDistanceEl.textContent = distance + " km";
}

// Update earth stats
export function updateEarthStats(stats) {
  const cableCountEl = getElement("cable-count");
  const landingPointCountEl = getElement("landing-point-count");
  const bgpAnomalyCountEl = getElement("bgp-anomaly-count");
  const bgpCollectorCountEl = getElement("bgp-collector-count");
  const bgpStatusSummaryEl = getElement("bgp-status-summary");
  const terrainStatusEl = getElement("terrain-status");
  const textureQualityEl = getElement("texture-quality");

  if (cableCountEl) cableCountEl.textContent = stats.cableCount || 0;
  if (landingPointCountEl)
    landingPointCountEl.textContent = stats.landingPointCount || 0;
  if (bgpAnomalyCountEl)
    bgpAnomalyCountEl.textContent = stats.bgpAnomalyCount || 0;
  if (bgpCollectorCountEl)
    bgpCollectorCountEl.textContent = stats.bgpCollectorCount || 0;
  if (bgpStatusSummaryEl)
    bgpStatusSummaryEl.textContent = stats.bgpStatusSummary || "-";
  if (terrainStatusEl)
    terrainStatusEl.textContent = stats.terrainOn ? "开启" : "关闭";
  if (textureQualityEl)
    textureQualityEl.textContent = stats.textureQuality || "8K 卫星图";
}

// Show/hide loading
export function setLoading(loading) {
  const loadingEl = getElement("loading");
  if (!loadingEl) return;
  setElementDisplay(loadingEl, loading);
}

export function setLoadingMessage(title, subtitle = "") {
  const titleEl = getElement("loading-title");
  const subtitleEl = getElement("loading-subtitle");

  if (titleEl) {
    titleEl.textContent = title;
  }

  if (subtitleEl) {
    subtitleEl.textContent = subtitle;
  }
}

// Show tooltip
export function showTooltip(x, y, content) {
  const tooltip = getElement("tooltip");
  if (!tooltip) return;
  tooltip.innerHTML = content;
  tooltip.style.left = x + "px";
  tooltip.style.top = y + "px";
  setElementDisplay(tooltip, true);
}

// Hide tooltip
export function hideTooltip() {
  const tooltip = getElement("tooltip");
  if (tooltip) {
    setElementDisplay(tooltip, false);
  }
}

// Show error message
export function showError(message) {
  const errorEl = getElement("error-message");
  if (!errorEl) return;
  errorEl.textContent = message;
  setElementDisplay(errorEl, true);
}

// Hide error message
export function hideError() {
  const errorEl = getElement("error-message");
  if (errorEl) {
    setElementDisplay(errorEl, false);
    errorEl.textContent = "";
  }
}

export function clearUiState() {
  clearStatusTimers();

  const statusEl = getElement("status-message");
  if (statusEl) {
    statusEl.className = STATUS_BASE_CLASS;
    setElementDisplay(statusEl, false);
    statusEl.textContent = "";
  }

  hideTooltip();
  hideError();
}