eomsangdonandClaude Opus 5.5
48d3d4e1af
- 새 M02_MasterTemplete_Sangeun_Sheet.ts(+ .css) — 보기 고르기(시트 + 옛 넷 그대로) · 줄 갈래(근거 · 옵션 · 변수 · 계산 · 자원 · 율 · 소계 · 합계) · 칸에서 옵션 · 품 · 단가 · 율 % · 빼기 · 되살림 · 되돌림 · [+ 자원 줄] · [+ 율 줄] · 고칠 때마다 서버 셈(최신 응답만) · M01 과 다른 줄 색 띠 - 새 logic/M02_Sangeun_Sheet_Model.ts — 시트 줄 · 읽기 쉬운 식(텍스트 수식 이름글 · 별칭) · 엔진 날식 숨김 · 산출서 한 줄 글 · 상태줄(M01 원래 · 지금 · 고치기 전) - ui_template_calc_row 시트 줄(createCalcSheetRow · is-changed) + 부품 모음 견본 한 줄 - Sangeun_Detail = 탭 등록만(createViewPicker → createSangeunSheet) - 시험 test_790_1 새 · test_721 단추 자리 단언을 새 보기 고르기 이름으로 고침(createViewPicker 걷음) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
86 lines
3.8 KiB
TypeScript
86 lines
3.8 KiB
TypeScript
/* =============================================================================
|
||
* ui_template_calc_row.ts
|
||
* 부품 「계산 줄」(557-2) — 계산서 한 줄: 이름 · 값 칸(입력 또는 계산 결과) · 덧칸(식 · 안내 · 둘째 값).
|
||
* 꼴 = 값 줄(`createCalcRow` · 이름 | 값 112 | 덧칸) · 식 줄(`createCalcFormulaRow` · 이름 | 식 | 값 112)
|
||
* · 시트 줄(`createCalcSheetRow` · 이름 | 식 | 값 112 | 꼬리 · 790-1 단가산출 시트)
|
||
* · 식 글(`createCalcFormula` · `^…^` 위첨자 · `_…_` 아래첨자) · 이름 칸 안 고르기(`ui-calc-row__label--select`)
|
||
* · 칸 조각 클래스 = 입력 `ui-calc-row__in` · 고르기 `__select`(값 칸 + 덧칸) · 결과 글 `__out`(숫자 오른쪽 · 중요 `is-key` 굵게) · 글 값 `__value` · 안내 `__hint`
|
||
* 크기 = 줄 최소 30(작은 입력) · 값 칸 112 · 사이 8 · 이름 14 · 식 · 안내 12
|
||
* 상태 = 기본만(입력 · 고르기 부품이 저마다 상태를 가짐 · 판정 색은 화면이 `is-key` 에 줌)
|
||
* 쓰는 법 = `createCalcRow("f : 유출계수", input)` · `createCalcFormulaRow("유속 (m/s)", createCalcFormula("V = 1/n × R^2/3^"), out)`
|
||
* 대신하는 옛 변종 = B08 수리집수면적표 `b08-hydro__row(--f)` · `__label` · `__formula` · `__out` · `__value` · `__in` · `__hint` · `__select`
|
||
* ========================================================================== */
|
||
|
||
import "./ui_template_calc_row.css";
|
||
|
||
function span(className: string, text = ""): HTMLElement {
|
||
const el = document.createElement("span");
|
||
el.className = className;
|
||
el.textContent = text;
|
||
return el;
|
||
}
|
||
|
||
/** 식 글 — `^…^` 사이는 위첨자 · `_…_` 사이는 아래첨자 · className 을 주면 이름 칸 등으로 씀 */
|
||
export function createCalcFormula(text: string, className = "ui-calc-formula"): HTMLElement {
|
||
const box = document.createElement("div");
|
||
box.className = className;
|
||
for (const part of text.split(/(\^[^^]+\^|_[^_]+_)/)) {
|
||
const tag =
|
||
part.startsWith("^") && part.endsWith("^")
|
||
? "sup"
|
||
: part.startsWith("_") && part.endsWith("_")
|
||
? "sub"
|
||
: "";
|
||
if (tag) {
|
||
const el = document.createElement(tag);
|
||
el.textContent = part.slice(1, -1);
|
||
box.append(el);
|
||
} else if (part) box.append(part);
|
||
}
|
||
return box;
|
||
}
|
||
|
||
/** 값 줄 — 이름 · 값 칸(입력 또는 계산) · 덧칸 */
|
||
export function createCalcRow(
|
||
label: string | HTMLElement,
|
||
value: HTMLElement,
|
||
extra?: HTMLElement,
|
||
): HTMLElement {
|
||
const row = document.createElement("div");
|
||
row.className = "ui-calc-row";
|
||
row.append(typeof label === "string" ? span("ui-calc-row__label", label) : label, value);
|
||
if (extra) row.append(extra);
|
||
return row;
|
||
}
|
||
|
||
/** 식 줄 — 이름 · 식(없으면 빈 칸) · 값 칸 */
|
||
export function createCalcFormulaRow(
|
||
label: string,
|
||
middle: HTMLElement | null,
|
||
value: HTMLElement,
|
||
): HTMLElement {
|
||
const row = document.createElement("div");
|
||
row.className = "ui-calc-row ui-calc-row--formula";
|
||
row.append(span("ui-calc-row__label", label), middle ?? document.createElement("span"), value);
|
||
return row;
|
||
}
|
||
|
||
/** 시트 줄(790-1) — 이름 · 식 · 값 112 · 꼬리 칸(비목 · 단추) · 좁으면 이름 · 값 윗줄 + 식 · 꼬리 아랫줄 ·
|
||
* 고친 줄 = `is-changed`(왼쪽 경고 색 띠) */
|
||
export function createCalcSheetRow(
|
||
label: string | HTMLElement,
|
||
middle: HTMLElement | null,
|
||
value: HTMLElement,
|
||
tail?: HTMLElement,
|
||
): HTMLElement {
|
||
const row = document.createElement("div");
|
||
row.className = "ui-calc-row ui-calc-row--sheet";
|
||
row.append(
|
||
typeof label === "string" ? span("ui-calc-row__label", label) : label,
|
||
middle ?? document.createElement("span"),
|
||
value,
|
||
tail ?? document.createElement("span"),
|
||
);
|
||
return row;
|
||
}
|