/* ============================================================================= * B08_Quantity_UI_Summary.ts * 1탭 구조물 집계표(PLAN 61-1) — 줄 = 측점 · 열 = 저장된 구조물 조합 · 맨 아래 계 줄. * 표는 공용 많은 자료 표(`ui_template_data_table` · PLAN 70-2) — 머리 · 측점 열 고정. * * 구조물 = GET …/route/structures · 배관 = GET …/drainage/pipe-points (읽기만) * 머리 두 줄 = 조합 구분(경로 첫 칸) · 조합 이름(나머지 경로) — 사본 manifest 경로(집계 응답 `linked`) * 조합 · 측점 = 프로젝트 안 사본이 있는 것만(`linkedOnly` · PLAN 143-1) — 미연결 시설은 그 측점 * 줄만 「· 미연결」(값 빈칸 · 서버 `unlinked` · PLAN 154-1) * 횡단배수 열 · 칸 = GET …/quantity/summary(서버 단독 · PLAN 98 · 120) — 머리 구조물 · 형식 · 규격 * 3단 + 단위 줄 · 「관 공」 맨 윗 머리 = 관에 이은 조합 경로(있으면) · 서버가 펼친 종류(`types`)는 * 조합 열에서 뺌 · 다른 구조물 열은 조합 그대로 * 열 폭 = 맨 아래 단 글(+ 칸 값)만 잼 · 위 단 머리는 줄바꿈(`B08_Quantity_UI_Page.css` · 120-2) * 줄을 누르면 그 측점의 구조물도 모달(PLAN 95-3 · `B08_Quantity_UI_Drawing` 은 누를 때 `import()`) * 미연결 시설 = 모달 맨 위 「조합 연결」 → 바로 저장 → 탭 몸통을 새로 그림(154-2) * 커플링 열 = 좌측 패널 1본 길이로 바로 다시 셈(관마다 길이 `pipes` · `recountCouplings` · PLAN 122) * ========================================================================== */ import { API_BASE_URL } from "@config/config_frontend"; import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale"; import { createCard, showToast } from "@ui/ui_template_elements"; import { fetchStructures } from "../B05_Profile/B05_Profile_Api_Structures"; import { fetchLatestRoute, readRouteLatestCache } from "../B05_Profile/B05_Profile_Api_Fetch"; import { fetchDetailPipePoints } from "../B04_PreProcess/B04_PreProcess_Api_Fetch"; import { createDataTable, type DataColumn, type DataRow } from "@ui/ui_template_data_table"; import { pipeStructureId } from "@ui/ui_template_item_picker_project"; import { stationLabel } from "../common_util/common_util_station"; import { summaryTooltip, type SummaryItem } from "../common_util/common_util_summary_item"; import { combosAt, comboId, linkedOnly, summaryColumns, summaryStations, type ComboColumn, type ComboLabel, type LinkedSnapshot, type PlacedItem, type UnlinkedFacility, unlinkedAt, widthOf, } from "./B08_Quantity_Summary_Data"; import { recountCouplings, type PipeLength } from "./B08_Quantity_Options_Calc"; import type { SheetsRequest } from "./B08_Quantity_UI_Drawing"; import { liveOnePipe, onOptionsChange } from "./B08_Quantity_UI_Options"; function L(key: keyof typeof ui_locales): string { return ui_locales[key][currentLanguageIndex]; } /** 측점 간격 — 노선 설정값 · 못 읽으면 20m. */ export async function stationInterval(projectId: string): Promise { const latest = readRouteLatestCache(projectId) ?? (await fetchLatestRoute(projectId)); return latest.route_params?.station_interval_m || 20; } function note(text: string): HTMLElement { const node = document.createElement("p"); node.className = "ui-general-block__empty"; node.textContent = text; return node; } /** 서버 배관 집계(PLAN 98-1) — 열 머리 `group`(구조물 · 형식 · 규격) + `label`(단위) · 열마다 조합 id. */ interface PipeColumn { id: string; group: string[]; label: string; combos: string[]; } interface PipeSummary { columns: PipeColumn[]; rows: Array<{ chainage_m: number; values: Record }>; total: Record; notes: string[]; /** 서버가 펼친 종류(`type_id` · 관 지점은 `facility`) — 조합 열에서 뺌 */ types: string[]; one_length_m: number | null; pipes: PipeLength[]; /** 연결된 사본 `{구조물 id: 사본}`(143-1) */ linked: Record; /** 미연결 시설(154-1) */ unlinked: UnlinkedFacility[]; } async function fetchPipeSummary(projectId: string): Promise { const response = await fetch(`${API_BASE_URL}/projects/${projectId}/quantity/summary`, { credentials: "include", }); if (!response.ok) throw new Error(`${response.status} ${await response.text()}`); return response.json(); } const PIPE_TOP = "관 공"; const stationKey = (station: number): number => Math.round(station * 100); /** 열 소수 자리 — 칸 · 계 값이 쓰는 만큼(최대 2). */ const placesOf = (values: number[]): number => Math.max(0, ...values.map((v) => (String(Math.round(v * 100) / 100).split(".")[1] ?? "").length)); /** 배관 열 → 표 열 · 「관 공」 맨 윗 머리 = 관에 이은 조합 경로(사본 경로 · 조합 잇기 98). */ function pipeColumns(summary: PipeSummary, comboPath: (id: string) => string | null): DataColumn[] { const top = summary.columns .filter((column) => column.group[0] === PIPE_TOP) .flatMap((column) => column.combos) .map(comboPath) .find((path) => !!path) ?? PIPE_TOP; return summary.columns.map((column) => { const group = column.group[0] === PIPE_TOP ? [top, ...column.group.slice(1)] : column.group; const values = [ ...summary.rows.map((row) => row.values[column.id]), summary.total[column.id], ].filter((value): value is number => typeof value === "number"); const decimals = placesOf(values); const texts = values.map((value) => value.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals, }), ); return { key: column.id, label: column.label, group, kind: "number", decimals, title: [...group, column.label].join(" › "), width: widthOf(column.label, ...texts), }; }); } function buildTable( stations: number[], columns: ComboColumn[], pipe: PipeSummary | null, comboPath: (id: string) => string | null, interval: number, unlinked: readonly UnlinkedFacility[], onRowClick: (station: number, label: string) => void, ): HTMLElement { const values = new Map((pipe?.rows ?? []).map((row) => [stationKey(row.chainage_m), row.values])); const total: DataRow | null = pipe?.columns.length ? { station: L("B08_Quantity_Summary_Total"), ...pipe.total } : null; const labels = stations.map((station) => stationLabel(station, interval)); // 미연결 시설 측점 = 「· 미연결」(값 빈칸 · 누르면 바로 연결 · 154) const shown = stations.map((station, i) => unlinkedAt(unlinked, station).length ? `${labels[i]} · ${L("B08_Quantity_Summary_Unlinked")}` : labels[i], ); const stationHead = L("B08_Quantity_Summary_Station"); const table = createDataTable({ columns: [ { key: "station", label: stationHead, width: widthOf(stationHead, ...shown) }, ...columns.map((column) => ({ key: column.id, label: column.name, group: [column.group || L("B08_Quantity_Summary_MissingGroup")], title: summaryTooltip(column.item), className: column.missing ? "is-missing" : undefined, width: widthOf(column.name), })), ...(pipe ? pipeColumns(pipe, comboPath) : []), ], // 조합 열 칸은 아직 비움 — 사용자가 채울 자리라 「-」 대신 빈칸 · 배관 칸 = 서버 값 rows: stations.map((station, i) => ({ station: shown[i], ...values.get(stationKey(station)), })), total, onRowClick: (i) => onRowClick(stations[i], labels[i]), frozen: 1, empty: "", caption: L("B08_Quantity_Tab_StructureSummary"), }); table.root.dataset.b08Summary = "table"; return table.root; } /** 행 누름 — 카드 · CAD 묶음은 이때 처음 받음. */ async function openSheets(request: SheetsRequest): Promise { try { const { openStructureSheets } = await import("./B08_Quantity_UI_Drawing"); openStructureSheets(request); } catch (error) { showToast(`${L("B08_Quantity_Drawing_Failed")} — ${String(error)}`, "error"); } } /** 탭 몸통을 그림 — 불러오는 동안 한 줄 · 실패하면 까닭 한 줄. */ export async function renderStructureSummary(host: HTMLElement, projectId: string): Promise { host.replaceChildren(note(L("B08_Quantity_Summary_Loading"))); try { const [structures, pipes, interval, pipe] = await Promise.all([ fetchStructures(projectId), // 배수 분석 전이면 관이 없음 — 구조물만으로 그림 fetchDetailPipePoints(projectId).then( (response) => response.pipe_points, () => [], ), stationInterval(projectId).catch(() => 20), // 배관 집계 실패 = 까닭 한 줄 · 나머지 표는 그대로 fetchPipeSummary(projectId).catch((error: unknown) => String(error)), ]); const saved = typeof pipe === "string" ? null : pipe; // 조합 이름 = 사본 manifest 경로(층 목록을 안 읽음 · 143-1) const linked = saved?.linked ?? {}; const paths = new Map( Object.values(linked).map((copy) => [comboId(copy.항목), copy.경로] as const), ); const describe = (item: SummaryItem): ComboLabel | null => { const [group = "", ...rest] = paths.get(comboId(item)) ?? []; return group ? { group, name: rest.join(" ") || group } : null; }; const comboPath = (id: string): string | null => paths.get(id)?.join(" ") || null; const placed = linkedOnly( pipes.map((point) => ({ ...point, structure_id: pipeStructureId(point.chainage_m) })), linked, ); const mine = linkedOnly(structures.structures, linked); const things: PlacedItem[] = [...mine, ...placed]; const unlinked = saved?.unlinked ?? []; const stations = summaryStations([...things, ...unlinked]); // 횡단배수는 서버 집계 열(98 · 120) — 조합 열은 다른 구조물 · 시설만(모달은 그대로 전부) const served = new Set(saved?.types ?? []); const others = [ ...mine.filter((item) => !served.has(item.type_id)), ...placed.filter((point) => !served.has(point.facility ?? "pipe")), ]; const columns = summaryColumns(others, describe); const live = (): PipeSummary | null => saved && recountCouplings(saved, liveOnePipe(projectId, saved.one_length_m)); const summary = live(); const parts: HTMLElement[] = []; if (typeof pipe === "string") parts.push(note(`${L("B08_Quantity_Summary_Failed")} — ${pipe}`)); for (const text of summary?.notes ?? []) parts.push(note(text)); if (!columns.length && !summary?.columns.length) parts.push(note(L("B08_Quantity_Summary_NoCombo"))); const draw = (): HTMLElement => stations.length ? buildTable(stations, columns, live(), comboPath, interval, unlinked, (station, label) => openSheets({ projectId, station: label, combos: combosAt(things, station), linked, describe, unlinked: unlinkedAt(unlinked, station), // 새 몸통에 다시 그림 — 옛 몸통은 떨어져 옵션 듣기가 스스로 빠짐(겹침 없음) onLinked: () => { const fresh = document.createElement("div"); host.replaceWith(fresh); void renderStructureSummary(fresh, projectId); }, }), ) : note(L("B08_Quantity_Summary_NoStation")); let table = draw(); parts.push(table); host.replaceChildren(createCard({ body: parts })); // 공용 카드 안(토공 표와 같은 꼴 · 143-3) onOptionsChange(host, () => { const next = draw(); table.replaceWith(next); table = next; }); } catch (error) { const reason = error instanceof Error ? error.message : String(error); host.replaceChildren(note(`${L("B08_Quantity_Summary_Failed")} — ${reason}`)); } }