eomsangdonandClaude Opus 5.5
c11baa441c
- 공용 화면 A00_Common/line_stack_* — 위 옵션 · 왼쪽 줄 쌓기 편집 · 오른쪽 산출근거(경쟁사 시트 꼴) · 맨 아래 합계 상자 - 모델 common_util_line_stack.ts — 수식 문서 ↔ 줄 쌓기 한 벌 왕복(차림 = 문서 칸 `쌓기` · 기본과 다를 때만) - 기계 · 단가산출 줄 단가 수 누름 = 그 문서를 같은 계산기로 셈해 펼침(손료 식 · 운전경비 · 노 · 재 · 경 · 계) - 공식 묶음 · 틀 풀기(단가산출 결과 → 이 문서 식) · 내 틀(이 브라우저) · 「내 틀 (… 에서 변경)」 - 수식 탭과 같은 길 · 같은 캐시 · 탭 바꾸면 다시 읽음 · [수식 저장] = 서버 정본 셈 - KaTeX(MIT) — vite 미리 묶기에서 뺌(rolldown 이 글자 규칙 서로게이트 범위를 깨뜨림) - 시험 test_804_2 6(왕복 1,518 · 금액 · 기계 펼침 = hourly · 틀 풀기 · 저장 · 이음) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
412 lines
14 KiB
TypeScript
412 lines
14 KiB
TypeScript
/* =============================================================================
|
|
* line_stack_screen.ts
|
|
* 단가산출 「줄 쌓기」 탭(PLAN 804-2 · 요구 670~677) — 공용(M01 단가산출 기초 · M02 단가산출 = 길 앞머리만 바꿈)
|
|
* 위 = 옵션 가로(수식 탭과 같은 부품 `formula_doc_options.ts`) · [고침 버림] · [수식 저장](관리자 · 층 쓰기)
|
|
* 가운데 = 왼쪽 줄 쌓기 편집(`line_stack_edit.ts`) | 오른쪽 산출근거 출력(`line_stack_out.ts` · 기계 시간당 경비 펼침)
|
|
* 아래 = 합계 상자(노무비 · 재료비 · 경비 · 계 — 수식 탭과 같은 부품)
|
|
* 정본 = 수식 문서(수식 탭과 같은 문서 · 같은 길 · 같은 캐시 열쇠 — 탭을 바꾸면 다시 읽음) · 줄 쌓기 차림 = 문서 칸 `쌓기`
|
|
* 셈 = 브라우저 계산기(`calcDoc`) 즉시 · 캐시에 없는 연결만 뒤에서 `POST {길}/preview`(옛 요청 끊음)
|
|
* 고침 = 캐시(sessionStorage)에 쌓고 [수식 저장] 한 번에 `POST {길}/save`(서버가 정본으로 다시 셈) · 자동저장 없음
|
|
* M02 사본(`copy`) — 저장 몸 {문서, 끊음(수식 탭이 끊은 문서 그대로), 판} · [단가 갱신] · [재생성]은 수식 탭
|
|
* ========================================================================== */
|
|
|
|
import { API_BASE_URL } from "@config/config_frontend";
|
|
import { createBadge } from "@ui/ui_template_badge";
|
|
import { createButton } from "@ui/ui_template_button";
|
|
import {
|
|
el,
|
|
hideLoadingOverlay,
|
|
showConfirmDialog,
|
|
showLoadingOverlay,
|
|
showToast,
|
|
} from "@ui/ui_template_elements";
|
|
import { blankDoc, type FormulaDoc } from "../common_util/common_util_formula_doc";
|
|
import { calcDoc, type DocAnswer } from "../common_util/common_util_formula_doc_calc";
|
|
import { createDocCache, type DocRecord } from "../common_util/common_util_formula_doc_cache";
|
|
import {
|
|
docOf,
|
|
notesOf,
|
|
stackOf,
|
|
type StackDoc,
|
|
type StackItem,
|
|
} from "../common_util/common_util_line_stack";
|
|
import { copyBadges, type CopyMark, type CopyOptions } from "./formula_doc_copy";
|
|
import type { Pick } from "./formula_doc_defs";
|
|
import { docFoot } from "./formula_doc_foot";
|
|
import { buildOptions } from "./formula_doc_options";
|
|
import { ft } from "./formula_doc_text";
|
|
import { buildEdit } from "./line_stack_edit";
|
|
import { buildOut } from "./line_stack_out";
|
|
import type { Tpl } from "./line_stack_rows";
|
|
import { lt } from "./line_stack_text";
|
|
import "./formula_doc.css";
|
|
import "./line_stack.css";
|
|
|
|
export interface StackScreenOptions {
|
|
/** 길 앞머리(`/m01/logic/doc`) — GET ?key · POST /preview · /save · /links */
|
|
base: string;
|
|
admin: boolean;
|
|
/** sessionStorage 열쇠 — 수식 탭과 같게(같은 문서 고침을 이어 받음) */
|
|
cache: string;
|
|
copy?: CopyOptions;
|
|
}
|
|
|
|
type Docs = Record<string, FormulaDoc>;
|
|
interface Loaded {
|
|
문서: StackDoc;
|
|
셈: DocAnswer;
|
|
연결: DocRecord;
|
|
새?: boolean;
|
|
끊음?: Docs;
|
|
사본?: CopyMark;
|
|
판?: string;
|
|
}
|
|
|
|
const TPL_KEY = "lineStack.myTemplates";
|
|
const clone = <T>(v: T): T => JSON.parse(JSON.stringify(v)) as T;
|
|
|
|
export function createStackScreen(opt: StackScreenOptions) {
|
|
const head = el("div", { className: "lstk__head" });
|
|
const notes = el("div", { className: "lstk__notes" });
|
|
const left = el("div", { className: "lstk__left" });
|
|
const right = el("div", { className: "lstk__right" });
|
|
const foot = el("div", { className: "lstk__foot" });
|
|
const root = el("div", {
|
|
className: "lstk",
|
|
attrs: { "data-line-stack": "" },
|
|
children: [head, notes, el("div", { className: "lstk__areas", children: [left, right] }), foot],
|
|
});
|
|
const cp = opt.copy;
|
|
let key = "";
|
|
let shown: string | null = null; // 연 키(같은 키 다시 그림 = 안 읽음 · 탭 바꿈 = force)
|
|
let saved = "";
|
|
let doc: StackDoc | null = null;
|
|
let answer: DocAnswer | null = null;
|
|
let cache = createDocCache();
|
|
let given: Record<string, unknown> = {};
|
|
let cut: Docs = {};
|
|
let mark: CopyMark | undefined;
|
|
let version = "";
|
|
let seq = 0;
|
|
let asked = "";
|
|
let ctl: AbortController | null = null;
|
|
const opened = new Set<string>(); // 산출근거 펼친 자리
|
|
const blocks = new Set<string>(); // 풀린 공식 묶음
|
|
|
|
const call = async <T>(path: string, body?: unknown, signal?: AbortSignal): Promise<T> => {
|
|
const r = await fetch(`${API_BASE_URL}${cp ? cp.route(key, path) : opt.base + path}`, {
|
|
method: body === undefined ? "GET" : "POST",
|
|
credentials: "include",
|
|
headers: { "Content-Type": "application/json" },
|
|
...(body === undefined ? {} : { body: JSON.stringify(body) }),
|
|
signal,
|
|
});
|
|
const data = (await r.json().catch(() => ({}))) as T & { detail?: unknown };
|
|
if (!r.ok) {
|
|
const why = data.detail;
|
|
throw Object.assign(new Error(typeof why === "string" ? why : r.statusText), {
|
|
status: r.status,
|
|
});
|
|
}
|
|
return data;
|
|
};
|
|
|
|
// ── 캐시(수식 탭과 같은 열쇠) ──
|
|
const drafts = (): Record<string, FormulaDoc> => {
|
|
try {
|
|
return JSON.parse(sessionStorage.getItem(opt.cache) ?? "{}") as Record<string, FormulaDoc>;
|
|
} catch {
|
|
return {};
|
|
}
|
|
};
|
|
const dirty = (): boolean => !!doc && JSON.stringify(doc) !== saved;
|
|
const keep = (): void => {
|
|
const all = drafts();
|
|
if (dirty()) all[key] = doc!;
|
|
else delete all[key];
|
|
try {
|
|
sessionStorage.setItem(opt.cache, JSON.stringify(all));
|
|
} catch {
|
|
/* 캐시가 막혀도 화면 안 고침은 남음 */
|
|
}
|
|
};
|
|
const templates = (): Tpl[] => {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(TPL_KEY) ?? "[]") as Tpl[];
|
|
} catch {
|
|
return [];
|
|
}
|
|
};
|
|
|
|
// ── 셈 ──
|
|
const usable = (): Record<string, unknown> => {
|
|
const out: Record<string, unknown> = {};
|
|
for (const v of doc?.변수 ?? []) {
|
|
const k = v.열쇠;
|
|
if (!k || !(k in given)) continue;
|
|
const kind = v.연결?.갈래;
|
|
if (kind === "입력") out[k] = given[k];
|
|
if (kind === "선택" && (v.연결?.목록 ?? []).some((x) => String(x) === String(given[k])))
|
|
out[k] = (v.연결!.목록 ?? []).find((x) => String(x) === String(given[k]));
|
|
}
|
|
return out;
|
|
};
|
|
const recalc = (): void => {
|
|
if (!doc) return;
|
|
answer = calcDoc(doc, cache.links, usable());
|
|
if (cache.takeMissing()) ask();
|
|
};
|
|
/** 캐시에 없는 연결 — 뒤에서 서버 기록을 받아 더함 */
|
|
const ask = (): void => {
|
|
const snap = JSON.stringify([doc, usable()]);
|
|
if (snap === asked) return;
|
|
asked = snap;
|
|
ctl?.abort();
|
|
ctl = new AbortController();
|
|
const mine = ++seq;
|
|
void call<{ 연결: DocRecord }>(
|
|
"/preview",
|
|
cp ? { 문서: doc, 끊음: cut } : { 문서: key ? doc : { ...doc, 키: "_새" }, 입력: usable() },
|
|
ctl.signal,
|
|
)
|
|
.then((got) => {
|
|
if (mine !== seq) return;
|
|
cache.merge(got.연결);
|
|
cache.merge({ 문서: cut });
|
|
recalc();
|
|
draw();
|
|
})
|
|
.catch(() => undefined);
|
|
};
|
|
const subDoc = (k: string): FormulaDoc | null => {
|
|
try {
|
|
return cache.links.doc(k) ?? null;
|
|
} catch {
|
|
if (cache.takeMissing()) ask();
|
|
return null;
|
|
}
|
|
};
|
|
|
|
/** 고침 — 문서 · 차림을 고친 뒤 문서로 굳힘 */
|
|
const change = (fn: (d: StackDoc, items: StackItem[]) => void): void => {
|
|
if (!doc) return;
|
|
const items = stackOf(doc);
|
|
fn(doc, items);
|
|
doc = docOf(doc, items);
|
|
keep();
|
|
recalc();
|
|
draw();
|
|
};
|
|
|
|
// ── 그림 ──
|
|
const edit = (): boolean => opt.admin && (!!key || !cp);
|
|
const draw = (): void => {
|
|
if (!doc || !answer) {
|
|
[head, notes, left, right, foot].forEach((x) => x.replaceChildren());
|
|
return;
|
|
}
|
|
const options = buildOptions(doc, given, !!cp && !opt.admin, (k, v, x) => {
|
|
const at = doc?.변수?.indexOf(v) ?? -1;
|
|
if (cp) return change((d) => at >= 0 && (d.변수![at].연결 = { ...v.연결!, 값: x }));
|
|
given[k] = x;
|
|
recalc();
|
|
draw();
|
|
});
|
|
const busy = dirty();
|
|
const tools =
|
|
edit() && key
|
|
? [
|
|
createButton({
|
|
label: ft("Discard"),
|
|
variant: "ghost",
|
|
size: 28,
|
|
disabled: !busy,
|
|
onClick: () => void discard(),
|
|
}),
|
|
createButton({
|
|
label: ft("Save"),
|
|
variant: "filled",
|
|
size: 28,
|
|
disabled: !busy,
|
|
onClick: () => void save(),
|
|
}),
|
|
]
|
|
: [];
|
|
head.replaceChildren(
|
|
...(options.length ? [el("div", { className: "fdoc__options", children: options })] : []),
|
|
el("div", {
|
|
className: "lstk__bar",
|
|
children: [
|
|
el("div", {
|
|
className: "lstk__badges",
|
|
children: [
|
|
...(busy ? [createBadge(ft("Dirty"), "warning")] : []),
|
|
...(cp ? copyBadges(mark, opt.admin) : []),
|
|
],
|
|
}),
|
|
el("div", { className: "lstk__tools", children: tools }),
|
|
],
|
|
}),
|
|
);
|
|
const kept = notesOf(doc);
|
|
notes.replaceChildren(
|
|
...(kept.length
|
|
? [
|
|
el("p", {
|
|
className: "ui-text ui-text--muted",
|
|
text: `${lt("Notes")} — ${kept.join(" · ")}`,
|
|
}),
|
|
]
|
|
: []),
|
|
);
|
|
const items = stackOf(doc);
|
|
root.dataset.edit = edit() ? "1" : "";
|
|
left.replaceChildren(
|
|
...(edit()
|
|
? [
|
|
buildEdit({
|
|
doc,
|
|
answer,
|
|
items,
|
|
change,
|
|
ask: (kind, words, group) =>
|
|
call<{ 후보: Pick[] }>("/links", { 갈래: kind, 검색: words, 분류: group }),
|
|
subDoc,
|
|
name: (k) => cache.names.get(k) ?? "",
|
|
open: blocks,
|
|
templates,
|
|
saveTpl: (t) => localStorage.setItem(TPL_KEY, JSON.stringify([...templates(), t])),
|
|
}),
|
|
]
|
|
: []),
|
|
);
|
|
right.replaceChildren(
|
|
items.length || doc.결과
|
|
? buildOut(doc, answer, {
|
|
cache,
|
|
open: opened,
|
|
toggle: (at) => {
|
|
if (opened.has(at)) opened.delete(at);
|
|
else opened.add(at);
|
|
draw();
|
|
},
|
|
miss: ask,
|
|
})
|
|
: el("p", { className: "ui-text ui-text--muted", text: lt("Empty") }),
|
|
);
|
|
foot.replaceChildren(...(doc.결과 ? [] : [docFoot(answer)]));
|
|
};
|
|
|
|
const take = (got: Loaded): void => {
|
|
cache.merge(got.연결);
|
|
saved = JSON.stringify(got.문서);
|
|
doc = clone(got.문서);
|
|
cut = clone(got.끊음 ?? {});
|
|
mark = got.사본;
|
|
version = got.판 ?? "";
|
|
};
|
|
|
|
const save = async (): Promise<void> => {
|
|
if (!doc || !dirty()) return;
|
|
const kept = drafts()[`${key}#끊음`] as unknown as Docs | undefined; // 수식 탭이 끊은 문서 고침
|
|
const send = cp ? { 문서: doc, 끊음: kept ?? cut, 판: version } : { 문서: doc };
|
|
showLoadingOverlay();
|
|
try {
|
|
const got = await call<Loaded>("/save", send);
|
|
take(got);
|
|
const all = drafts();
|
|
delete all[`${key}#끊음`];
|
|
sessionStorage.setItem(opt.cache, JSON.stringify(all));
|
|
keep();
|
|
recalc();
|
|
draw();
|
|
if (cp && got.판) cp.onSaved?.(got.판);
|
|
showToast(ft("Saved"), "success");
|
|
} catch (e) {
|
|
showToast(`${ft("Save_Failed")} — ${e instanceof Error ? e.message : ""}`, "error");
|
|
} finally {
|
|
hideLoadingOverlay();
|
|
}
|
|
};
|
|
|
|
const discard = async (): Promise<void> => {
|
|
if (!doc || !dirty()) return void draw();
|
|
doc = JSON.parse(saved) as StackDoc;
|
|
keep();
|
|
recalc();
|
|
draw();
|
|
};
|
|
|
|
/** 문서 열기 — 서버 · 캐시에서 다시 읽음(수식 탭 고침 · 저장을 이어 받음) */
|
|
const open = async (next: string): Promise<void> => {
|
|
const was = key;
|
|
shown = next;
|
|
if (next !== key) {
|
|
opened.clear();
|
|
blocks.clear();
|
|
given = {};
|
|
}
|
|
key = next;
|
|
doc = answer = null;
|
|
asked = "";
|
|
cache = createDocCache();
|
|
[cut, mark, version] = [{}, undefined, ""];
|
|
draw();
|
|
if (!next) {
|
|
if (cp)
|
|
return void right.replaceChildren(
|
|
el("p", { className: "ui-text ui-text--muted", text: lt("Unsaved_New") }),
|
|
);
|
|
doc = (drafts()[""] as StackDoc | undefined) ?? blankDoc();
|
|
saved = JSON.stringify(blankDoc());
|
|
recalc();
|
|
return draw();
|
|
}
|
|
const mine = ++seq;
|
|
try {
|
|
const got = await call<Loaded>(cp ? "" : `?key=${encodeURIComponent(next)}`);
|
|
if (mine !== seq || key !== next) return;
|
|
take(got);
|
|
const all = drafts();
|
|
if (!was && got.새 && all[""] && !all[next]) {
|
|
all[next] = { ...all[""], 키: next, 이름: got.문서.이름, 결과단위: got.문서.결과단위 };
|
|
delete all[""];
|
|
sessionStorage.setItem(opt.cache, JSON.stringify(all));
|
|
}
|
|
if (all[next]) doc = clone(all[next] as StackDoc);
|
|
if (cp && all[`${next}#끊음`])
|
|
cache.merge({ 문서: (cut = clone(all[`${next}#끊음`] as unknown as Docs)) });
|
|
recalc();
|
|
draw();
|
|
} catch (e) {
|
|
if (mine === seq)
|
|
head.replaceChildren(
|
|
el("p", {
|
|
className: "ui-text ui-text--muted",
|
|
text: `${ft("Load_Failed")} — ${e instanceof Error ? e.message : ""}`,
|
|
}),
|
|
);
|
|
}
|
|
};
|
|
|
|
const canLeave = async (): Promise<boolean> => {
|
|
if (!dirty()) return true;
|
|
if (!(key in drafts())) return true; // 수식 탭에서 이미 버림
|
|
if (!(await showConfirmDialog(ft("Leave"), ft("Leave_Ok")))) return false;
|
|
doc = JSON.parse(saved) as StackDoc;
|
|
keep();
|
|
return true;
|
|
};
|
|
|
|
return {
|
|
root,
|
|
/** 로직 · SK 키로 그림(빈 키 = 저장 전 새 것) — 같은 키는 그대로 · `force` = 다시 읽음(탭 바꿈) */
|
|
draw: (next: string, force = false): void => {
|
|
if (force || next !== shown) void open(next);
|
|
},
|
|
canLeave,
|
|
/** 시험 · 확인용 */
|
|
state: () => ({ doc, answer, dirty: dirty(), items: doc ? stackOf(doc) : [] }),
|
|
};
|
|
}
|