eomsangdonandClaude Opus 5.5
0cc7ff67eb
- 새 B08_Quantity_UI_Drawing.ts · .css — 조합 목록 · 차례 = 집계표와 같음(B08_Quantity_Summary_Data.summaryColumns) - 한 장 = M02 항목 카드(createItemCards) 그대로 · 조합 원본 층 readTemplate 읽기만 · editable false · [저장] · [수정] 없음 - 안내 글 — 조합 없음 · M02 에 없는 조합 · 도번 없는 조합 - B08_Quantity_UI_Page.ts 2탭에 붙이는 두 줄 · locale_b4 글 넷 - 시험 test_61_2_b08_structure_sheets(탭 붙음 · 읽기만 · 같은 열 · 글 키) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W4uKaV4ZBhsJN4GHG7yRj4
94 lines
3.6 KiB
TypeScript
94 lines
3.6 KiB
TypeScript
/* =============================================================================
|
|
* B08_Quantity_UI_Page.ts
|
|
* 로그인 후 08: 5차 워크플로우 (수량 산출) — 위 탭 화면 (PLAN 61)
|
|
*
|
|
* 탭 = 구조물 집계표 · 구조물도 · 토적표 · 수리집수면적표 — 차례대로 만듦.
|
|
* 지금은 1탭(구조물 집계표 · 61-1)만 내용 · 나머지는 빈 탭.
|
|
* 옛 수량 산출 코드(`old_code/B08_Quantity/`)는 가져오지 않음 — 새로 씀.
|
|
* ========================================================================== */
|
|
|
|
import "@ui/ui_template_general_layout.css";
|
|
import "./B08_Quantity_UI_Page.css";
|
|
import { createWorkflowLayout } from "@ui/ui_template_workflow_layout";
|
|
import { createButton } from "@ui/ui_template_elements";
|
|
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
|
|
import { CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
|
|
import { workflowSteps } from "../A00_Common/b_page_scaffold";
|
|
import { goToWorkflowStage, WORKFLOW_STEP_ROUTES } from "../A00_Common/b_workflow_nav";
|
|
import { renderStructureSummary } from "./B08_Quantity_UI_Summary";
|
|
import { renderStructureSheets } from "./B08_Quantity_UI_Drawing";
|
|
|
|
function L(key: keyof typeof ui_locales): string {
|
|
return ui_locales[key][currentLanguageIndex];
|
|
}
|
|
|
|
const TABS = [
|
|
{ id: "summary", label: "B08_Quantity_Tab_StructureSummary" },
|
|
{ id: "sheet", label: "B08_Quantity_Tab_StructureSheet" },
|
|
{ id: "earthwork", label: "B08_Quantity_Tab_Earthwork" },
|
|
{ id: "hydrology", label: "B08_Quantity_Tab_Hydrology" },
|
|
] as const;
|
|
|
|
type TabId = (typeof TABS)[number]["id"];
|
|
|
|
/** 탭마다 새 몸통 — 늦게 온 응답이 다른 탭 화면을 덮지 않게(떨어진 몸통에만 그림). */
|
|
function renderTab(host: HTMLElement, tab: TabId, projectId: string | null): void {
|
|
const view = document.createElement("div");
|
|
host.replaceChildren(view);
|
|
if (tab === "summary" && projectId) {
|
|
void renderStructureSummary(view, projectId);
|
|
return;
|
|
}
|
|
if (tab === "sheet" && projectId) return void renderStructureSheets(view, projectId);
|
|
const pending = document.createElement("p");
|
|
pending.className = "ui-general-block__empty";
|
|
pending.textContent = L("B08_Quantity_Tab_Pending");
|
|
view.append(pending);
|
|
}
|
|
|
|
export function renderB08Quantity(root: HTMLElement): void {
|
|
const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY);
|
|
|
|
const tabBar = document.createElement("div");
|
|
tabBar.className = "b08-quantity__tabs";
|
|
tabBar.setAttribute("role", "tablist");
|
|
const panel = document.createElement("div");
|
|
panel.className = "b08-quantity__panel";
|
|
panel.setAttribute("role", "tabpanel");
|
|
|
|
const select = (tab: TabId): void => {
|
|
tabBar.replaceChildren(
|
|
...TABS.map(({ id, label }) => {
|
|
const button = createButton({
|
|
label: L(label),
|
|
variant: id === tab ? "filled" : "ghost",
|
|
size: "sm",
|
|
onClick: () => id !== tab && select(id),
|
|
});
|
|
button.setAttribute("role", "tab");
|
|
button.setAttribute("aria-selected", String(id === tab));
|
|
button.dataset.b08Tab = id;
|
|
return button;
|
|
}),
|
|
);
|
|
renderTab(panel, tab, projectId);
|
|
};
|
|
|
|
const body = document.createElement("div");
|
|
body.className = "b08-quantity";
|
|
body.append(tabBar, panel);
|
|
select("summary");
|
|
|
|
const layout = createWorkflowLayout({
|
|
title: L("B08_Quantity_Title"),
|
|
steps: workflowSteps(),
|
|
activeStep: 5,
|
|
mainContent: body,
|
|
routes: WORKFLOW_STEP_ROUTES,
|
|
onStepClick: (stepIndex: number) => {
|
|
if (projectId) goToWorkflowStage(projectId, WORKFLOW_STEP_ROUTES[stepIndex]);
|
|
},
|
|
});
|
|
root.append(layout.root);
|
|
}
|