@vicaniddouglas/js_aide 1.11.0 → 1.13.0

package/demo/main.js

@@ -0,0 +1,368 @@
+import {
+  sendRequest,
+  popup,
+  icons,
+  inputHandlers,
+  SmartInput,
+  getQueueStatus,
+} from "../index.js";
+
+/**
+ * JS AIDE DASHBOARD & DOCUMENTATION
+ * Modernized for v1.12.0 with a new Indigo/Teal theme.
+ */
+
+// Global State for Demo
+const retryStats = {
+  attempts: 0,
+};
+
+// =============================================================================
+// I. SETUP SMART COMPONENTS
+// =============================================================================
+const initSmartInputs = () => {
+  SmartInput.injectStyles();
+
+  const si = new SmartInput();
+  const showcase = document.getElementById("smart-input-showcase");
+
+  if (showcase) {
+    si.createFormattedNumberInput({
+      id: "demo-salary",
+      labelText: "Annual Salary (Currency)",
+      container: showcase,
+      placeholder: "e.g., 50,000.00",
+    });
+
+    si.createLimitedTextInput({
+      id: "demo-username",
+      labelText: "Restricted Username",
+      container: showcase,
+      maxLength: 15,
+      placeholder: "Alphabets & Numbers Only",
+      allowedCharactersString:
+        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
+    });
+  }
+
+  ["cfg-retries", "cfg-delay", "cfg-latency"].forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) {
+      inputHandlers.allowOnlyNumbers(el, { allowDecimals: false });
+    }
+  });
+};
+
+// =============================================================================
+// II. DYNAMIC NAVIGATION & ACCORDIONS
+// =============================================================================
+const initNavigation = () => {
+  const navItems = document.querySelectorAll(".nav-item, .sub-nav-item");
+  const views = document.querySelectorAll(".content-view");
+  const viewTitle = document.getElementById("current-view-title");
+
+  navItems.forEach((item) => {
+    item.addEventListener("click", (e) => {
+      if (item.classList.contains("github-link")) return;
+      e.preventDefault();
+
+      const targetView = item.getAttribute("data-view");
+
+      navItems.forEach((n) => n.classList.remove("active"));
+      item.classList.add("active");
+
+      views.forEach((v) => v.classList.remove("active"));
+
+      const specificView = document.getElementById(`view-${targetView}`);
+      if (specificView) {
+        specificView.classList.add("active");
+      } else if (targetView.startsWith("docs-")) {
+        document.getElementById("view-docs-generic").classList.add("active");
+      } else {
+        document.getElementById("view-about").classList.add("active");
+      }
+
+      viewTitle.innerText = item.innerText.replace(/^\S+\s/, "");
+      window.scrollTo(0, 0);
+    });
+  });
+
+  const accordionItems = document.querySelectorAll(".accordion-item");
+  accordionItems.forEach((item) => {
+    const header = item.querySelector(".accordion-header");
+    header.addEventListener("click", () => {
+      const isActive = item.classList.contains("active");
+
+      accordionItems.forEach((other) => {
+        other.classList.remove("active");
+        const arrow = other.querySelector(".accordion-arrow");
+        if (arrow) arrow.innerText = "▸";
+      });
+
+      if (!isActive) {
+        item.classList.add("active");
+        const arrow = item.querySelector(".accordion-arrow");
+        if (arrow) arrow.innerText = "▾";
+      }
+    });
+  });
+
+  document.querySelectorAll(".nav-group-header").forEach((header) => {
+    header.addEventListener("click", () => {
+      const content = header.nextElementSibling;
+      const arrow = header.querySelector(".arrow");
+      if (content.style.display === "none") {
+        content.style.display = "block";
+        arrow.innerText = "▾";
+      } else {
+        content.style.display = "none";
+        arrow.innerText = "▸";
+      }
+    });
+  });
+};
+
+// =============================================================================
+// III. ICON INJECTION
+// =============================================================================
+const initIcons = () => {
+  const iconMap = {
+    "icon-about": icons.homeIcon2(),
+    "icon-features": icons.skillsIcon(),
+    "icon-demo": icons.playIcon2(),
+    "info-icon-light": icons.dashboardIcon2(),
+    "info-icon-modular": icons.branchIcon(),
+    "info-icon-proactive": icons.notificationsIcon(),
+    "icon-config": icons.settingsIcon
+      ? icons.settingsIcon()
+      : icons.skillsIcon(),
+    "icon-smart": icons.checkMarkIcon1(),
+    "feat-icon-http": icons.refreshIcon2(),
+    "feat-icon-ws": icons.messagesIcon2(),
+    "feat-icon-val": icons.checkMarkIcon1(),
+    "feat-icon-obs": icons.viewIcon(),
+    "feat-icon-pop": icons.notificationsIcon(),
+  };
+
+  Object.entries(iconMap).forEach(([id, svg]) => {
+    const el = document.getElementById(id);
+    if (el) el.innerHTML = svg;
+  });
+};
+
+// =============================================================================
+// IV. MOCK BACKEND
+// =============================================================================
+const getMockDelay = () =>
+  parseInt(document.getElementById("cfg-latency").value) || 1000;
+const mocks = {
+  "/api/save": {
+    status: true,
+    log: "Profile saved securely",
+    data: { id: 101 },
+  },
+  "/api/settings": {
+    status: false,
+    log: "500 Internal Server Error",
+    data: null,
+  },
+  "/api/queue": {
+    status: true,
+    log: "Task Complete",
+    data: {},
+  },
+};
+
+// =============================================================================
+// V. LOADING OVERLAY
+// =============================================================================
+const toggleLoading = async (show) => {
+  const bar = document.getElementById("top-loading-bar");
+  if (show) {
+    bar.className = "loading-bar active";
+  } else {
+    bar.className = "loading-bar complete";
+    setTimeout(() => {
+      bar.className = "loading-bar";
+    }, 500);
+  }
+};
+
+// =============================================================================
+// VI. DEMO ACTIONS
+// =============================================================================
+const initDemoActions = () => {
+  const getConfig = () => ({
+    maxRetries: parseInt(document.getElementById("cfg-retries").value) || 0,
+    retryDelay: parseInt(document.getElementById("cfg-delay").value) || 1000,
+    silent: document.getElementById("cfg-silent").checked,
+  });
+
+  const updateQueueStatus = () => {
+    const status = getQueueStatus();
+    const display = document.getElementById("queue-display");
+    if (display) {
+      display.querySelector(".active-count").innerText =
+        `Active: ${status.active}`;
+      display.querySelector(".pending-count").innerText =
+        `Pending: ${status.pending}`;
+    }
+  };
+
+  // SUCCESS ACTION
+  document.getElementById("btn-success").addEventListener("click", async () => {
+    const log = document.getElementById("log-success");
+    log.innerText = "Processing...";
+    log.className = "status-pill status-active";
+
+    await sendRequest({
+      endpoint: "/api/save",
+      showLoading: toggleLoading,
+      ...getConfig(),
+      onSuccess: async () => {
+        log.innerText = "Success (Popup Blocked)";
+        await popup.success("Success! Requests validated.");
+        log.innerText = "Flow Complete";
+      },
+    });
+
+    log.className = "status-pill status-idle";
+  });
+
+  // ERROR ACTION (With Retry Showcase)
+  document.getElementById("btn-error").addEventListener("click", async () => {
+    const log = document.getElementById("log-error");
+    retryStats.attempts = 0; // Reset
+    log.innerText = "Attempting...";
+    log.className = "status-pill status-active";
+
+    await sendRequest({
+      endpoint: "/api/settings",
+      showLoading: toggleLoading,
+      ...getConfig(),
+      onError: () => {
+        log.innerText = "Failed after retries";
+      },
+    });
+
+    log.className = "status-pill status-idle";
+  });
+
+  // QUEUE ACTIONS
+  const addToQueue = (priority) => {
+    const logArea = document.getElementById("queue-log");
+    const item = document.createElement("div");
+    const id = Math.random().toString(36).substr(2, 5).toUpperCase();
+    item.className = `queue-item ${priority > 0 ? "high" : "low"}`;
+    item.innerHTML = `<span><strong>[ID-${id}]</strong> ${priority > 0 ? "High" : "Low"} Priority</span><span class="status">Waiting...</span>`;
+    logArea.prepend(item);
+
+    sendRequest({
+      endpoint: "/api/queue",
+      useQueue: true,
+      priority,
+      onSuccess: () => {
+        item.classList.add("complete");
+        item.querySelector(".status").innerText = "Success";
+        updateQueueStatus();
+      },
+    });
+    updateQueueStatus();
+  };
+
+  document
+    .getElementById("btn-queue-low")
+    .addEventListener("click", () => addToQueue(0));
+  document
+    .getElementById("btn-queue-high")
+    .addEventListener("click", () => addToQueue(10));
+};
+
+// =============================================================================
+// VII. BOOTSTRAP INTERCEPTOR MOCK
+// =============================================================================
+XMLHttpRequest.prototype.open = (function (open) {
+  return function (_method, url) {
+    this._url = url;
+    return open.apply(this, arguments);
+  };
+})(XMLHttpRequest.prototype.open);
+
+XMLHttpRequest.prototype.send = (function (send) {
+  return function () {
+    const mockMatch = Object.keys(mocks).find((m) => this._url.includes(m));
+    if (mockMatch) {
+      // Retry Showcase Logic
+      if (this._url.includes("/api/settings")) {
+        retryStats.attempts++;
+        const log = document.getElementById("log-error");
+        if (log) {
+          log.innerHTML = `<span class="spinner"></span> Retry #${retryStats.attempts - 1}...`;
+        }
+      }
+
+      setTimeout(() => {
+        const mock = mocks[mockMatch];
+        Object.defineProperty(this, "status", {
+          writable: true,
+          value: mock.status ? 200 : 500,
+        });
+        Object.defineProperty(this, "responseText", {
+          writable: true,
+          value: JSON.stringify(mock),
+        });
+        Object.defineProperty(this, "readyState", { writable: true, value: 4 });
+        this.onload();
+      }, getMockDelay());
+    } else {
+      send.apply(this, arguments);
+    }
+  };
+})(XMLHttpRequest.prototype.send);
+
+// =============================================================================
+// VI. POPUP PLAYGROUND
+// =============================================================================
+const initPopups = () => {
+  const logResult = (type, result) => {
+    const display = document.getElementById("popup-playground-result");
+    if (display) {
+      display.innerHTML = `&raquo; [${new Date().toLocaleTimeString()}] <span style="color:white">${type}:</span> ${JSON.stringify(result)}`;
+    }
+  };
+
+  const getPlaygroundConfig = () => {
+    const message =
+      document.getElementById("playground-message")?.value || "Default Message";
+    const type =
+      document.querySelector('input[name="playground-type"]:checked')?.value ||
+      "text";
+    return { message, type };
+  };
+
+  document
+    .getElementById("btn-run-prompt")
+    ?.addEventListener("click", async () => {
+      const { message, type } = getPlaygroundConfig();
+      const res = await popup.prompt(message, {
+        inputType: type,
+        placeholder: `Enter ${type} here...`,
+      });
+      logResult(`Prompt (${type})`, res);
+    });
+
+  document
+    .getElementById("btn-run-confirm")
+    ?.addEventListener("click", async () => {
+      const { message } = getPlaygroundConfig();
+      const res = await popup.confirm(message);
+      logResult("Confirm Result", res);
+    });
+};
+
+// RUN
+initNavigation();
+initIcons();
+initSmartInputs();
+initDemoActions();
+initPopups();