api7-demo/web/static/js/app.js

// Global API configuration
const DEFAULT_API_BASE = "/api";
const API_BASE_KEY = "api_base_url";

// Get API base URL from localStorage or use default
function getApiBaseUrl() {
  return localStorage.getItem(API_BASE_KEY) || DEFAULT_API_BASE;
}

// Set API base URL
function setApiBaseUrl(url) {
  localStorage.setItem(API_BASE_KEY, url);
}

// Export for global access
window.API_BASE = getApiBaseUrl();

// API Configuration Modal Functions
function openApiConfig(event) {
  if (event) event.preventDefault();

  const modal = document.getElementById("api-config-modal");
  const input = document.getElementById("api-base-url");
  const currentUrl = document.getElementById("current-api-url");

  input.value = getApiBaseUrl();
  currentUrl.textContent = getApiBaseUrl();
  modal.style.display = "block";
}

function closeApiConfig() {
  const modal = document.getElementById("api-config-modal");
  modal.style.display = "none";
}

function saveApiConfig() {
  const input = document.getElementById("api-base-url");
  const url = input.value.trim();

  if (!url) {
    alert("Please enter a valid API base URL");
    return;
  }

  // Remove trailing slash if present
  const cleanUrl = url.endsWith("/") ? url.slice(0, -1) : url;

  setApiBaseUrl(cleanUrl);
  window.API_BASE = cleanUrl;

  showNotification("API configuration saved. Reloading page...", "success");

  setTimeout(() => {
    window.location.reload();
  }, 1000);
}

function resetApiConfig() {
  if (confirm("Reset API configuration to default (/api)?")) {
    setApiBaseUrl(DEFAULT_API_BASE);
    window.API_BASE = DEFAULT_API_BASE;

    showNotification("API configuration reset. Reloading page...", "success");

    setTimeout(() => {
      window.location.reload();
    }, 1000);
  }
}

// Close modal when clicking outside
window.onclick = function (event) {
  const modal = document.getElementById("api-config-modal");
  if (event.target === modal) {
    closeApiConfig();
  }
};

// Utility functions
function showNotification(message, type = "info") {
  console.log(`[${type.toUpperCase()}] ${message}`);
  // Could be extended with toast notifications
}

function formatDate(dateString) {
  const date = new Date(dateString);
  return date.toLocaleDateString() + " " + date.toLocaleTimeString();
}

function formatPrice(price) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(price);
}

// API call wrapper
async function apiCall(endpoint, options = {}) {
  try {
    const response = await fetch(`${API_BASE}${endpoint}`, {
      ...options,
      headers: {
        "Content-Type": "application/json",
        ...options.headers,
      },
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    return await response.json();
  } catch (error) {
    showNotification(error.message, "error");
    throw error;
  }
}

// Export for use in templates
window.apiCall = apiCall;
window.showNotification = showNotification;
window.formatDate = formatDate;
window.formatPrice = formatPrice;