@clazic/urban 0.2.5 → 0.2.6

package/web/scripts/pages/catalog.js

@@ -0,0 +1,134 @@
+import { getJson } from "../api.js";
+import { qs, escapeHtml } from "../dom.js";
+import { openFileViewer } from "../components/file-viewer.js";
+
+function relativeTime(ts) {
+  if (!ts) return "";
+  const diff = Date.now() - (typeof ts === "number" ? ts : new Date(ts).getTime());
+  const mins = Math.floor(diff / 60000);
+  if (mins < 60) return `${mins}분 전`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}시간 전`;
+  return `${Math.floor(hours / 24)}일 전`;
+}
+
+let _clickHandler = null;
+
+async function loadCatalog(page = 1) {
+  const params = new URLSearchParams({ page: String(page), limit: "20" });
+  [["catalog-source", "source"], ["catalog-status", "status"], ["catalog-lang", "lang"], ["catalog-q", "q"]].forEach(([id, key]) => {
+    const value = qs(`#${id}`)?.value?.trim();
+    if (value) params.set(key, value);
+  });
+  const data = await getJson(`/api/reports?${params}`);
+  const list = qs("#catalog-list");
+  const summary = qs("#catalog-summary");
+  const pages = qs("#catalog-pagination");
+
+  if (summary) {
+    const total = data.total || 0;
+    const from = total === 0 ? 0 : (page - 1) * (data.limit || 20) + 1;
+    const to = Math.min(page * (data.limit || 20), total);
+    summary.textContent = total > 0 ? `${total.toLocaleString()}건 중 ${from}–${to} 표시` : "결과 없음";
+  }
+
+  if (list) {
+    if (_clickHandler) list.removeEventListener("click", _clickHandler);
+    _clickHandler = (e) => {
+      const row = e.target.closest(".catalog-row");
+      if (!row) return;
+
+      const hash = row.dataset.hash;
+      const rawPath = row.dataset.rawPath || null;
+      const mdPath = row.dataset.mdPath || null;
+
+      const fileLink = e.target.closest("[data-open]");
+      if (fileLink) {
+        if (fileLink.dataset.open === "raw") {
+          openFileViewer(hash, rawPath, null);
+        } else if (fileLink.dataset.open === "md") {
+          openFileViewer(hash, null, mdPath);
+        }
+        return;
+      }
+      openFileViewer(hash, rawPath, mdPath);
+    };
+    list.addEventListener("click", _clickHandler);
+
+    list.innerHTML = (data.items || []).map((item) => {
+      const hasRaw = !!(item.file_path);
+      const hasMd = !!(item.md_path);
+      const rawFile = (item.file_path || "").split(/[\\/]/).pop() || "";
+      const rawExt = rawFile.split(".").pop().toUpperCase() || "FILE";
+
+      const metaParts = [
+        item.year ? `${item.year}년` : null,
+        item.source ? item.source.toUpperCase() : null,
+      ].filter(Boolean);
+
+      const effectiveStatus = (item.status === "indexed" || item.status === "INDEXED") && !item.md_path
+        ? "partial" : (item.status || "").toLowerCase();
+
+      const statusColors = {
+        indexed: "var-green",
+        failed: "var-red",
+        error: "var-red",
+        partial: "var-yellow",
+        pending: "var-blue",
+      };
+      const statusColor = statusColors[effectiveStatus] || "";
+      const statusLabel = effectiveStatus === "partial" ? "PARTIAL" : (item.status || "").toUpperCase();
+
+      const mdFile = (item.md_path || "").split(/[\\/]/).pop() || "";
+
+      return `<div class="catalog-row" role="button" tabindex="0"
+          data-hash="${escapeHtml(item.hash || "")}"
+          data-raw-path="${escapeHtml(item.file_path || "")}"
+          data-md-path="${escapeHtml(item.md_path || "")}">
+        <div class="catalog-row-body">
+          <div class="catalog-row-title">${escapeHtml(item.title || "제목 없음")}</div>
+          ${metaParts.length ? `<div class="catalog-row-meta">${metaParts.map(escapeHtml).join(" · ")}${effectiveStatus ? ` · <span class="catalog-status ${statusColor}">${escapeHtml(statusLabel)}</span>` : ""}</div>` : ""}
+          ${hasRaw ? `<div class="catalog-file-name" data-open="raw" title="${escapeHtml(rawFile)}">${escapeHtml(rawFile)}</div>` : ""}
+          ${hasMd ? `<div class="catalog-file-name md" data-open="md"><i class="fa-solid fa-arrow-right-long"></i> ${escapeHtml(mdFile)}</div>` : ""}
+        </div>
+      </div>`;
+    }).join("") || '<div class="empty-state">보고서 없음</div>';
+  }
+
+  if (pages) {
+    const totalPages = Math.ceil((data.total || 0) / (data.limit || 20));
+    pages.innerHTML = Array.from({ length: totalPages }, (_, idx) => idx + 1)
+      .map((p) => `<button class="btn sm ${p === page ? "primary" : ""}" data-page="${p}">${p}</button>`).join("");
+    pages.querySelectorAll("[data-page]").forEach((button) => button.addEventListener("click", () => loadCatalog(Number(button.dataset.page))));
+  }
+}
+
+export async function mount() {
+  const sourceSelect = qs("#catalog-source");
+  if (sourceSelect && sourceSelect.options.length <= 1) {
+    sourceSelect.insertAdjacentHTML("beforeend", `
+      <option value="prism">PRISM</option>
+      <option value="nanet">NANET</option>
+      <option value="upload">UPLOAD</option>
+    `);
+  }
+  ["catalog-source", "catalog-status", "catalog-lang"].forEach((id) => qs(`#${id}`)?.addEventListener("change", () => loadCatalog(1)));
+  qs("#catalog-q")?.addEventListener("keydown", (e) => { if (e.key === "Enter") loadCatalog(1); });
+  document.querySelector('[data-action="catalog-refresh"]')?.addEventListener("click", () => loadCatalog(1));
+  document.querySelector('[data-action="catalog-reset"]')?.addEventListener("click", () => {
+    ["catalog-source", "catalog-status", "catalog-lang", "catalog-q"].forEach((id) => {
+      const el = qs(`#${id}`);
+      if (el) el.value = "";
+    });
+    loadCatalog(1);
+  });
+  await loadCatalog(1);
+}
+
+export async function unmount() {
+  const list = qs("#catalog-list");
+  if (list && _clickHandler) list.removeEventListener("click", _clickHandler);
+  _clickHandler = null;
+}
+
+export default { mount, unmount };

package/web/scripts/pages/failures.js

@@ -0,0 +1,72 @@
+import { getJson, postJson } from "../api.js";
+import { qs, escapeHtml } from "../dom.js";
+
+async function loadFailures() {
+  const data = await getJson("/api/failures?dismissed=false");
+  const items = data.items || [];
+  if (qs("#failures-stat-total")) qs("#failures-stat-total").textContent = String(items.length);
+  if (qs("#failures-stat-today")) qs("#failures-stat-today").textContent = String(items.filter((item) => {
+    const ts = new Date(item.updated_at || item.failed_at || item.created_at || 0).getTime();
+    return Date.now() - ts < 86400000;
+  }).length);
+  if (qs("#failures-stat-retry")) qs("#failures-stat-retry").textContent = String(items.length);
+  if (qs("#failures-stat-resolved")) qs("#failures-stat-resolved").textContent = "-";
+  const list = qs("#failures-list");
+  if (!list) return;
+  list.innerHTML = items.map((item) => `
+    <div class="card">
+      <div class="fail-row">
+        <div class="f-ico danger"><i class="fa-solid fa-triangle-exclamation"></i></div>
+        <div>
+          <div class="f-title">${escapeHtml(item.title || item.docid || "제목 없음")}</div>
+          <div class="f-meta">
+            <span class="chip err">${escapeHtml(item.failed_stage || item.status || "error")}</span>
+            <span>${item.failed_at ? new Date(item.failed_at).toLocaleString("ko-KR") : ""}</span>
+          </div>
+          <pre class="f-err">${escapeHtml(item.failed_reason || item.last_error || item.error_message || "")}</pre>
+        </div>
+        <div class="f-side">
+          <button class="btn sm" data-retry-hash="${escapeHtml(item.hash)}">재시도</button>
+          <button class="btn sm ghost" data-dismiss-hash="${escapeHtml(item.hash)}">숨김</button>
+        </div>
+      </div>
+    </div>
+  `).join("") || '<div class="empty-state">실패 항목 없음</div>';
+  list.querySelectorAll("[data-retry-hash]").forEach((button) => button.addEventListener("click", async () => {
+    const hash = button.dataset.retryHash;
+    button.disabled = true;
+    button.textContent = "재시도 중…";
+    try {
+      const result = await postJson(`/api/failures/${encodeURIComponent(hash)}/retry`);
+      if (!result?.ok) throw new Error(result?.error || "재시도 등록 실패");
+      button.closest(".card")?.remove();
+    } catch (err) {
+      console.error("retry failed", err);
+      alert(`재시도 실패: ${err.message}`);
+      button.disabled = false;
+      button.textContent = "재시도";
+    } finally {
+      setTimeout(() => loadFailures().catch(() => {}), 800);
+    }
+  }));
+  list.querySelectorAll("[data-dismiss-hash]").forEach((button) => button.addEventListener("click", async () => {
+    await postJson(`/api/failures/${button.dataset.dismissHash}/dismiss`);
+    loadFailures();
+  }));
+}
+
+export async function mount() {
+  qs("#failures-retry-all")?.addEventListener("click", async () => {
+    await postJson("/api/failures/retry-all");
+    loadFailures();
+  });
+  qs("#failures-dismiss-all")?.addEventListener("click", async () => {
+    await postJson("/api/failures/dismiss-all");
+    loadFailures();
+  });
+  await loadFailures();
+}
+
+export async function unmount() {}
+
+export default { mount, unmount };