Files
Aislo/B08_Quantity/B08_Quantity_UI_StructureSheet.ts
T

480 lines
20 KiB
TypeScript

/* =============================================================================
* B08_Quantity_UI_StructureSheet.ts
* 구조물도 탭 — 제원 조합 하나 = 한 장. 장마다 하위 탭 · 원단위 수량표 · 제원 칸 (PLAN 3장).
*
* ⛔ 탭 등록은 이 파일이 하지 않음 — `B08_Quantity_UI_Page.ts` 탭 배선은 브레인 몫(PLAN 0장 충돌 막이).
* 부르는 법: `{ label: "구조물도", build: () => renderStructureSheets(projectId) }`
* ⚠ 값을 셈하지 않음 — 서버(`/quantity/structure-sheets`)가 낸 단위당 값을 표기 자리수로만 접음.
* ⚠ 한 장 = 상단 그림(`_StructureFigure`, 읽기 전용 SVG) + 원단위 수량표 + 하단 일위대가.
* ⚠ 제원 저장은 칸 옆 [제원 저장] 한 번에 정본(`structures.json`)으로 감 — 옛 B07 폼 규약 그대로.
* ⚠ 식 고치기(PLAN 3장 ⑤) — 칸에서 고치면 **이 화면이 같은 풀이기로 즉시** 다시 풂(왕복 없음).
* [식 저장] 때는 식만 보내고 **값은 서버가 Node 로 다시 냄**(판정 Ⓐ). 저장은 양식 + 프로젝트 단위.
* ========================================================================== */
import { API_BASE_URL } from "@config/config_frontend";
import { fetchStructures } from "../B05_Profile/B05_Profile_Api_Structures";
import type { FormulaSheet } from "./B08_Quantity_Formula";
import {
amountText,
DESTINATION_LABELS,
el,
formulaTable,
noteText,
num,
type FormulaEditRow,
type Rounding,
} from "./B08_Quantity_UI_StructureSheet_Formula";
import { stationLabel } from "./B08_Quantity_UI_EarthworkGrid";
import { injectEarthworkGridStyles } from "./B08_Quantity_UI_EarthworkGrid_Style";
import {
buildStandardSpecPanel,
type StandardSheetSpec,
type StandardSpecResult,
} from "./B08_Quantity_UI_StructureSheet_Spec";
import { buildLibraryPanel, libraryLabel } from "./B08_Quantity_UI_StructureSheet_Library";
import { unitPriceSection } from "./B08_Quantity_UI_StructureSheet_UnitPrice";
import { FIGURE_CSS, figureSection, type FigureShape } from "./B08_Quantity_UI_StructureFigure";
export interface StructureSheetRow {
no: number;
name: string;
spec: string;
basis: string;
/** 단위당 값 — 단위 수량을 못 정한 장은 `null`(0 으로 때우지 않음). */
unit_amount: number | null;
amount: number | null;
unit: string;
basis_kind: string;
source: string;
/** 양식 줄만 — 기계가 푸는 식(명세 13장). 비면 고정형(지금 전개). */
formula?: string;
/** 양식 원래 식 — 고친 줄이면 `formula` 와 다름(되돌릴 자리). */
default_formula?: string;
destination?: string;
rounding?: Rounding | null;
/** 양식 원래 반올림 — 고친 줄이면 `rounding` 과 다름. */
default_rounding?: Rounding | null;
/** `when` 이 거짓이라 안 선 줄 — 「안 섬」과 까닭을 보임(0 으로 안 적음). */
skipped?: boolean;
reason?: string;
error?: string;
}
export interface StructureSheet extends StandardSheetSpec {
height_m: number;
unit_label: string;
billing_unit: string;
billing_total: number;
rows: StructureSheetRow[];
members: {
structure_id: string | null;
name: string;
start_m: number | null;
end_m: number | null;
length_m: number;
billing_quantity: number;
}[];
notes: string[];
unpriced_rows: string[];
/** 상단 그림 모양 목록 — 못 그리는 장은 `null` + `figure_reason`(PLAN 12장). */
figure?: FigureShape[] | null;
figure_reason?: string | null;
/** 양식으로 선 장이면 그 양식 — 없으면 지금 전개 줄(고정형 모양). */
/** `imported_from` 없음 = 프로그램 기본을 읽는 중(가져오기 전). */
library_item?: {
type_id: string;
name: string;
code?: string | null;
imported_from?: string | null;
};
/** 화면이 조작 중 왕복 없이 다시 풀 장 한 벌(L=1, 고친 식 얹힘). */
formula_sheet?: FormulaSheet;
/** 제원 칸의 대안 후보(실무 관측값 등) — 값은 안 바꾸고 보이기만. */
var_candidates?: {
name: string;
label: string;
value: number | string | null;
candidates: { value: number | string; source?: string }[];
}[];
}
export interface StructureSheetsResponse {
sheets: StructureSheet[];
sheet_count: number;
structure_count: number;
skipped_structures: string[];
pending_choices: { label: string; effect?: string }[];
}
const STYLE_ID = "b08-structure-sheet-style";
const CSS = `
.b08-sheet { display: flex; gap: 12px; align-items: flex-start; min-height: 0; flex: 1 1 auto; }
.b08-sheet__main { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; min-height: 0; }
.b08-sheet__aside { flex: 0 0 17rem; max-height: 100%; overflow: auto; }
.b08-sheet__head { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; color: var(--color-text); }
.b08-sheet__tabs { flex-wrap: wrap; }
.b08-sheet .b08-grid__table--summary td:nth-child(5) { text-align: center; }
/* 산출 근거는 길다 — 접지 않으면 수량 칸이 화면 밖으로 밀림(2026-09-13 화면 실측). */
.b08-sheet__rows td:nth-child(3) { white-space: pre-line; min-width: 16rem; }
.b08-sheet__rows td:nth-child(7) { white-space: normal; max-width: 18rem; }
/* 식 칸 — 고칠 수 있는 칸은 입력으로, 고친 칸은 표시가 남음. */
.b08-sheet__formula { display: flex; gap: 4px; margin-top: 2px; }
.b08-sheet__formula input { flex: 1 1 auto; min-width: 12rem; font: 12px var(--font-mono, monospace);
padding: 1px 4px; color: var(--color-text); background: var(--color-surface);
border: 1px solid var(--color-border); }
.b08-sheet__formula input.is-changed { border-color: var(--color-accent, #6c8ebf); }
.b08-sheet__formula button { font-size: 11px; padding: 0 6px; cursor: pointer; }
.b08-sheet__formula select { font-size: 11px; max-width: 11rem; }
.b08-sheet__formula select.is-changed { outline: 1px solid var(--color-accent, #6c8ebf); }
.b08-sheet__formula .b08-sheet__digits { flex: 0 0 3.2rem; min-width: 3.2rem; }
.b08-sheet__actions { display: flex; gap: 8px; align-items: center; }
/* 수동 단가 — 빨간 테두리 + 「미확정 N건」 배지(PLAN 확정 ⑦). */
.b08-unit__manual { outline: 2px solid var(--color-danger, #d9534f); outline-offset: -2px; }
.b08-unit__badge { margin-left: 8px; padding: 0 6px; border-radius: 8px; color: #fff;
background: var(--color-danger, #d9534f); font-size: 12px; white-space: nowrap; }
.b08-unit-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.b08-unit-edit td { white-space: nowrap; }
.b08-unit-edit__picker { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.b08-unit-edit__results { display: flex; flex-direction: column; align-items: flex-start;
gap: 2px; width: 100%; max-height: 14rem; overflow: auto; }
@media (max-width: 900px) {
.b08-sheet { flex-direction: column; }
.b08-sheet__aside { flex-basis: auto; width: 100%; }
}
`;
function injectStyles(): void {
injectEarthworkGridStyles();
if (document.getElementById(STYLE_ID)) return;
const style = document.createElement("style");
style.id = STYLE_ID;
style.textContent = CSS + FIGURE_CSS;
document.head.append(style);
}
async function fetchStructureSheets(projectId: string): Promise<StructureSheetsResponse> {
const response = await fetch(
`${API_BASE_URL}/projects/${encodeURIComponent(projectId)}/quantity/structure-sheets`,
{ credentials: "include" },
);
if (!response.ok) throw new Error(`structure sheets failed: ${response.status}`);
return (await response.json()) as StructureSheetsResponse;
}
async function putStructureSheetSpec(
projectId: string,
body: StandardSpecResult & { base_revision: number },
): Promise<{ changed: number; notes: string[] }> {
const response = await fetch(
`${API_BASE_URL}/projects/${encodeURIComponent(projectId)}/quantity/structure-sheets/spec`,
{
method: "PUT",
credentials: "include",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
},
);
const payload = (await response.json().catch(() => ({}))) as {
changed?: number;
notes?: string[];
message?: string;
};
// 실패 사유(판번호 충돌 등)는 폼 안내 칸에 그대로 뜬다 — 조용히 끝나면 저장된 줄 앎.
if (!response.ok) throw new Error(payload.message ?? `HTTP ${response.status}`);
return { changed: payload.changed ?? 0, notes: payload.notes ?? [] };
}
/** 고친 식·반올림 저장 — 값은 안 보냄. 돌아오는 줄 값은 **서버가 다시 푼 것**(판정 Ⓐ). */
async function putStructureSheetFormulas(
projectId: string,
sheetKey: string,
rows: FormulaEditRow[],
): Promise<{ changed: number; errors: string[] }> {
const response = await fetch(
`${API_BASE_URL}/projects/${encodeURIComponent(projectId)}/quantity/structure-sheets/formulas`,
{
method: "PUT",
credentials: "include",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ sheet_key: sheetKey, rows }),
},
);
const payload = (await response.json().catch(() => ({}))) as {
changed?: number;
errors?: string[];
message?: string;
};
if (!response.ok) throw new Error(payload.message ?? `HTTP ${response.status}`);
return { changed: payload.changed ?? 0, errors: payload.errors ?? [] };
}
function warn(title: string, items: string[]): HTMLElement | null {
if (!items.length) return null;
return el("p", "b08-grid__caption b08-grid__caption--warn", `${title}: ${items.join(" · ")}`);
}
function table(head: string[], rows: string[][], extraClass = ""): HTMLElement {
const scroller = el("div", "b08-grid__scroll");
const grid = el("table", `b08-grid__table b08-grid__table--summary ${extraClass}`.trim());
const thead = document.createElement("thead");
const headRow = document.createElement("tr");
for (const label of head) headRow.append(el("th", "", label));
thead.append(headRow);
const tbody = document.createElement("tbody");
for (const cells of rows) {
const tr = document.createElement("tr");
for (const text of cells) tr.append(el("td", "", text));
tbody.append(tr);
}
grid.append(thead, tbody);
scroller.append(grid);
return scroller;
}
/** 사용자가 고친 식 줄 수 — 장 머리 「그 뒤 고쳤나」와 가져오기 전 물음에 씀. */
function editedRows(sheet: StructureSheet): number {
return sheet.rows.filter((row) => row.source === "user").length;
}
/** 장 한 벌의 가운데 — 머리 · 원단위 수량표(양식 장은 식 칸) · 막힌 사유 · 개소 목록. */
function sheetBody(
sheet: StructureSheet,
editor: HTMLElement | null,
below: HTMLElement | null = null,
): HTMLElement {
const main = el("div", "b08-sheet__main");
const head = el("p", "b08-sheet__head");
const total = sheet.billing_total
? ` · 합 ${num(sheet.billing_total, 2)}${sheet.billing_unit}`
: "";
head.append(
el(
"span",
"",
`${sheet.title}${sheet.member_count}개소${total} · ` +
// 양식 있음/없음을 머리에서 바로 가림 — 조용히 섞이면 왜 값이 다른지 못 찾음.
(sheet.library_item
? libraryLabel(sheet.library_item, editedRows(sheet))
: "양식 없음(지금 전개)"),
),
// 실무 시트 머리의 「m당」·「개소당」 — 종류마다 다름(통일하지 않음).
el("span", "b08-grid__caption", sheet.unit_label),
);
// 한 장 = 상단 그림 + 하단 표(PLAN 3장 한 장의 짜임) — 못 그리는 장은 까닭.
main.append(head, figureSection(sheet.figure, sheet.figure_reason));
if (!sheet.rows.length) {
main.append(
el("p", "b08-quantity__message", "이 제원은 원단위 줄이 서지 않음 — 아래 사유 참고"),
);
} else if (editor) {
main.append(editor);
} else {
main.append(
table(
["공종", "규격", "산출 근거", "수량", "단위", "갈 곳", "비고"],
sheet.rows.map((row) => [
row.name,
row.spec,
// 근거 문구의 `**강조**` 는 서버 문서용 표기 — 표에서는 떼고 보임.
// 양식 줄은 **식을 버리지 않고** 설명 밑에 함께 보임(명세 13장 지킬 것 ④).
row.basis.replace(/\*\*/g, "") + (row.formula ? `\n= ${row.formula}` : ""),
amountText(row),
row.unit,
DESTINATION_LABELS[row.destination ?? ""] ?? row.destination ?? "",
noteText(row),
]),
"b08-sheet__rows",
),
);
}
for (const item of sheet.var_candidates ?? []) {
const others = item.candidates
.map((c) => `${c.value}${c.source ? `(${c.source})` : ""}`)
.join(" · ");
main.append(
el(
"p",
"b08-grid__caption",
`대안 후보 — ${item.label}: 지금 ${item.value} · 후보 ${others}`,
),
);
}
// 하단 일위대가(미리보기) — 수량표 바로 밑(PLAN 3장 한 장의 짜임).
if (below) main.append(below);
for (const notice of [
warn("단위당을 못 낸 줄", sheet.unpriced_rows),
warn(
"사유",
sheet.notes.map((note) => note.replace(/\*\*/g, "")),
),
]) {
if (notice) main.append(notice);
}
main.append(
el("p", "b08-grid__caption", "이 장에 묶인 개소"),
table(
["구조물", "구간", "연장(m)", `수량(${sheet.billing_unit})`],
sheet.members.map((member) => {
const { start_m: start, end_m: end } = member;
const span =
typeof start === "number" && typeof end === "number"
? start === end
? stationLabel(start)
: `${stationLabel(start)} ~ ${stationLabel(end)}`
: "";
return [member.name, span, num(member.length_m, 1), num(member.billing_quantity, 2)];
}),
),
);
return main;
}
/** 구조물도 탭 본문. 받아 오는 동안 안내를 띄우고, 제원을 저장하면 **정본에서 다시 받아** 그림. */
export function renderStructureSheets(projectId: string | null): HTMLElement {
injectStyles();
const wrap = el("div", "b08-grid");
if (!projectId) {
wrap.append(el("p", "b08-quantity__message", "프로젝트를 먼저 고를 것"));
return wrap;
}
// 저장 안 한 식이 조용히 사라지지 않게 — 나갈 때 묻기(자동저장은 안 만듦, CLAUDE.md 5장).
let dirty = false;
window.addEventListener("beforeunload", (event) => {
if (!dirty || !wrap.isConnected) return;
event.preventDefault();
event.returnValue = "저장 안 한 식이 있음";
});
const paint = (response: StructureSheetsResponse, memberId: string | null, notes: string[]) => {
const sheets = response.sheets ?? [];
const caption = el(
"p",
"b08-grid__caption",
`구조물도 ${sheets.length}장 · 구조물 ${response.structure_count}개 · 제원 조합 하나가 한 장 · 할증 전 값`,
);
const nodes: HTMLElement[] = [caption];
const skipped = warn("건너뛴 구조물", response.skipped_structures ?? []);
if (skipped) nodes.push(skipped);
for (const choice of response.pending_choices ?? []) {
const effect = choice.effect ? ` · ${choice.effect.replace(/\*\*/g, "")}` : "";
nodes.push(el("p", "b08-quantity__notice", `⚠ 미확정: ${choice.label}${effect}`));
}
if (!sheets.length) {
nodes.push(
el(
"p",
"b08-quantity__message",
response.structure_count
? "구조물이 모두 다른 단계에서 셈되어 구조물도에 실리지 않음"
: "배치된 구조물이 없음 — 구조물을 먼저 배치할 것",
),
);
wrap.replaceChildren(...nodes);
return;
}
// 저장 뒤에는 **같은 개소가 든 장**을 다시 연다 — 제원이 바뀌면 장 이름(key)도 바뀌기 때문.
const found = sheets.findIndex((sheet) =>
sheet.members.some((member) => memberId && member.structure_id === memberId),
);
const tabs = el("div", "b08-quantity__tabs b08-sheet__tabs");
const pane = el("div", "b08-sheet");
const buttons: HTMLButtonElement[] = [];
const show = (index: number, initialNotes: string[] = []): void => {
// 새로 그린 표에는 고친 칸이 없음 — [식 저장] 뒤 다시 그릴 때 「저장 안 한 식」이 남으면
// 나갈 때·다른 장으로 갈 때 헛물음이 뜨고 [내 라이브러리에 저장]이 막힘(2026-09-13 화면 실측).
dirty = false;
buttons.forEach((button, i) => button.classList.toggle("is-active", i === index));
const sheet = sheets[index];
const aside = el("div", "b08-sheet__aside");
// 판정된 기울기는 **칸에 적지 않고 도움말로만** — 적어 두면 「안 정함」이 사라진다.
const judged = /1:([\d.]+)/.exec(sheet.title)?.[1] ?? null;
aside.append(
buildStandardSpecPanel(
sheet,
judged,
async (result) => {
const { revision } = await fetchStructures(projectId);
const saved = await putStructureSheetSpec(projectId, {
...result,
base_revision: revision,
});
const after = [`${saved.changed}개소에 반영했습니다.`, ...saved.notes];
// 정본이 바뀌었으니 표를 **다시 받아** 그린다 — 화면이 두 번째 정본이 되면 안 됨.
await load(sheet.members[0]?.structure_id ?? null, after);
return after;
},
initialNotes,
),
);
if (sheet.library_item) {
aside.append(
buildLibraryPanel({
projectId,
sheetKey: sheet.key,
typeId: sheet.library_item.type_id,
currentCode: sheet.library_item.code ?? null,
isDirty: () => dirty,
confirmTake: () => {
const edited = editedRows(sheet);
const lost = [edited ? `고친 식 ${edited}줄` : "", dirty ? "저장 안 한 식" : ""]
.filter(Boolean)
.join(" · ");
if (!lost) return true;
if (!window.confirm(`가져오면 이 종류의 ${lost}이 비워짐 — 가져올까요?`))
return false;
dirty = false;
return true;
},
onImported: (after) => load(sheet.members[0]?.structure_id ?? null, after),
}),
);
}
const editor = sheet.formula_sheet
? formulaTable(
sheet,
async (rows) => {
const result = await putStructureSheetFormulas(projectId, sheet.key, rows);
// 서버가 다시 푼 값으로 **다시 받아** 그림 — 화면 계산을 정본으로 적지 않음.
await load(sheet.members[0]?.structure_id ?? null);
return result.errors;
},
(next) => {
dirty = next;
},
)
: null;
const unitPrice = sheet.library_item
? unitPriceSection(projectId, sheet.key, sheet.rows)
: null;
pane.replaceChildren(sheetBody(sheet, editor, unitPrice), aside);
};
sheets.forEach((sheet, index) => {
const button = el("button", "b08-quantity__tab", `${index + 1}. ${sheet.title}`);
button.type = "button";
button.addEventListener("click", () => {
// 다른 장으로 가면 고친 식이 사라짐 — 조용히 버리지 않고 물음.
if (dirty && !window.confirm("저장 안 한 식이 있음 — 버리고 다른 장으로 갈까요?")) return;
dirty = false;
show(index);
});
buttons.push(button);
tabs.append(button);
});
wrap.replaceChildren(...nodes, tabs, pane);
show(found >= 0 ? found : 0, notes);
};
const load = async (memberId: string | null = null, notes: string[] = []): Promise<void> => {
try {
paint(await fetchStructureSheets(projectId), memberId, notes);
} catch {
wrap.replaceChildren(el("p", "b08-quantity__message", "구조물도를 불러오지 못함"));
}
};
wrap.append(el("p", "b08-quantity__message", "구조물도를 불러오는 중…"));
void load();
return wrap;
}