From 6e0d86c9619952b77bda44982fa9496e65bf4e1b Mon Sep 17 00:00:00 2001 From: umsangdon Date: Thu, 12 Nov 2026 13:39:59 +0900 Subject: [PATCH] =?UTF-8?q?feat(821-2):=20=EA=B8=B0=EA=B3=84=20=EC=96=91?= =?UTF-8?q?=EC=8B=9D=20=EB=B6=80=ED=92=88=20=E2=80=94=20=EC=B9=B8=20?= =?UTF-8?q?=EC=97=AC=EC=84=AF=20=C2=B7=20=EC=86=90=EB=A3=8C=EA=B3=84?= =?UTF-8?q?=EC=88=98=20=EB=91=90=20=EB=B0=A9=EC=8B=9D=20=C2=B7=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=84=EB=8B=B9=20=EA=B0=92=20=EC=A7=81=EC=A0=91=20=C2=B7=20?= =?UTF-8?q?=EC=98=86=20=EA=B3=84=EC=82=B0=EC=8B=9D=20=EC=A6=89=EC=8B=9C=20?= =?UTF-8?q?=C2=B7=20=EB=B9=84=EC=8A=B7=ED=95=9C=20=EA=B8=B0=EA=B3=84?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=8B=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ui_template_machine_form.ts · .css — 목록 · 찾기 · 저장은 부르는 쪽이 줌(M01 · M02 에 안 묶임) · 숫자만 · 범위 경고 · 고친 칸 노랑 · 같은 이름 알림 자리 · 좁은 폭 한 줄 - 품셈 방식 = 비율 칸 · 계수 넷 읽기 전용(입력이 처음과 같으면 저장 값 그대로) - 사전 ui_template_locale_machine.ts · 부품 모음 견본 한 칸 Co-Authored-By: Claude Opus 5.5 --- ui_template/ui_template_locale.ts | 2 + ui_template/ui_template_locale_machine.ts | 72 +++ ui_template/ui_template_machine_form.css | 112 +++++ ui_template/ui_template_machine_form.ts | 506 ++++++++++++++++++++++ ui_template/ui_template_ui_kit_parts.ts | 19 + 5 files changed, 711 insertions(+) create mode 100644 ui_template/ui_template_locale_machine.ts create mode 100644 ui_template/ui_template_machine_form.css create mode 100644 ui_template/ui_template_machine_form.ts diff --git a/ui_template/ui_template_locale.ts b/ui_template/ui_template_locale.ts index 6f8179e7e..fd9f08a0d 100644 --- a/ui_template/ui_template_locale.ts +++ b/ui_template/ui_template_locale.ts @@ -32,6 +32,7 @@ import { ui_locales_b3 } from "./ui_template_locale_b3"; import { ui_locales_e04 } from "./ui_template_locale_e04"; import { ui_locales_b5 } from "./ui_template_locale_b5"; import { ui_locales_m1 } from "./ui_template_locale_m1"; +import { ui_locales_machine } from "./ui_template_locale_machine"; import { ui_locales_m2 } from "./ui_template_locale_m2"; import { ui_locales_m2_judge } from "./ui_template_locale_m2_judge"; import { ui_locales_de } from "./ui_template_locale_de"; @@ -77,6 +78,7 @@ export const ui_locales = { ...ui_locales_e04, ...ui_locales_b5, ...ui_locales_m1, + ...ui_locales_machine, ...ui_locales_m2, ...ui_locales_m2_judge, ...ui_locales_de, diff --git a/ui_template/ui_template_locale_machine.ts b/ui_template/ui_template_locale_machine.ts new file mode 100644 index 000000000..e45ba5d55 --- /dev/null +++ b/ui_template/ui_template_locale_machine.ts @@ -0,0 +1,72 @@ +/* ============================================================================= + * ui_template_locale_machine.ts + * 기계 양식 부품(`ui_template_machine_form.ts`) · M01 기계 목록 · 상세 사전(PLAN 821-2) — 신규 문구는 최하단에. + * ========================================================================== */ + +export const ui_locales_machine = { + MF_Name: ["이름", "Name"], + MF_Spec: ["규격", "Spec"], + MF_Price: ["가격", "Price"], + MF_Coef: ["손료계수", "Ownership coef."], + MF_CoefDirect: ["바로 넣기", "Enter directly"], + MF_CoefPumsem: ["품셈 방식", "By standard"], + MF_Life: ["내용시간", "Service life"], + MF_Yearly: ["연간표준가동시간", "Annual hours"], + MF_Dep: ["상각비율", "Depreciation ratio"], + MF_Rep: ["정비비율", "Maintenance ratio"], + MF_Mgmt: ["연간관리비율", "Annual mgmt ratio"], + MF_DepCoef: ["상각비계수", "Depreciation coef."], + MF_RepCoef: ["정비비계수", "Maintenance coef."], + MF_MgmtCoef: ["관리비계수", "Mgmt coef."], + MF_Fuel: ["주연료", "Main fuel"], + MF_FuelKind: ["연료 종류", "Fuel"], + MF_Misc: ["잡품", "Sundries"], + MF_Crew: ["조종원", "Operator"], + MF_Job: ["직종", "Trade"], + MF_Power: ["전력", "Power"], + MF_None: ["없음", "None"], + MF_Build: ["구성", "Components"], + MF_HourlyDirect: ["시간당 값 직접", "Hourly values"], + MF_Labor: ["노무비", "Labor"], + MF_Material: ["재료비", "Material"], + MF_Expense: ["경비", "Expense"], + MF_Total: ["계", "Total"], + MF_Loss: ["손료", "Ownership"], + MF_NumberOnly: ["숫자만", "Numbers only"], + MF_Range: ["보통 범위 {value} 밖", "Outside usual range {value}"], + MF_Preview: ["시간당 경비 미리보기", "Hourly cost preview"], + MF_PreviewNote: [ + "전국평균 단가 · 넣는 즉시 셈 · 저장 때 서버가 다시 셈", + "National average · instant · server recalculates on save", + ], + MF_NoPrice: ["단가 없음", "no price"], + MF_Similar: ["비슷한 기계에서 시작", "Start from a similar machine"], + MF_SimilarFind: ["기계 이름 · 규격으로 찾기", "Find by name or spec"], + MF_SimilarNone: ["찾은 기계 없음", "No machines found"], + MF_SimilarCopied: ["{value} 값을 복사함", "Copied values from {value}"], + MF_Changed: ["고친 칸", "edited"], + M01_MachineNew: ["새 기계", "New machine"], + M01_MachineBack: ["목록으로", "Back to list"], + M01_MachineHourly: ["시간당 경비", "Hourly cost"], + M01_MachineMeta: ["원문 · 구분", "Source · group"], + M01_MachineUses: ["쓰는 곳", "Used by"], + M01_MachineNoUses: ["쓰는 곳 없음", "Not used"], + M01_MachineSame: [ + "같은 이름 · 규격 기계가 있음 — {value}", + "A machine with the same name and spec exists — {value}", + ], + M01_MachineDelete: ["지우기", "Delete"], + M01_MachineDeleteAsk: [ + "이 기계를 지울까? 쓰는 곳 {value} — [저장] 해야 지워짐", + "Delete this machine? Used by {value} — applied on [Save]", + ], + M01_MachineLeave: [ + "저장 안 한 고침이 있음. 나갈까? (고침은 초안에 남음)", + "Unsaved edits. Leave? (edits stay in the draft)", + ], + M01_MachineNotFound: ["그 기계가 없음", "Machine not found"], + M01_MachineReadOnly: ["읽기만 — 시스템 관리자만 고침", "Read only — system admins edit"], + M01_MachineErrors: ["고칠 칸이 있음", "Fix the marked fields"], + M01_MachineDetailGroup: ["상세구분", "Sub-group"], + M01_MachineSourceNo: ["원문번호", "Source no."], +} as const; diff --git a/ui_template/ui_template_machine_form.css b/ui_template/ui_template_machine_form.css new file mode 100644 index 000000000..7d8681fa8 --- /dev/null +++ b/ui_template/ui_template_machine_form.css @@ -0,0 +1,112 @@ +/* 기계 양식(821-2) — 왼쪽 칸 · 오른쪽 시간당 계산식 · 좁은 폭(720 아래)은 한 줄로 */ +.ui-machine-form { + display: grid; + grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); + gap: var(--spacing-16); + align-items: start; +} + +.ui-machine-form__fields { + display: flex; + flex-direction: column; + gap: var(--spacing-12); + min-width: 0; +} + +.ui-machine-form__row { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: var(--spacing-8) var(--spacing-12); +} + +.ui-machine-form__group { + display: flex; + flex-direction: column; + gap: var(--spacing-8); +} + +.ui-machine-form__head { + display: flex; + align-items: center; + gap: var(--spacing-12); +} + +.ui-machine-form__coefs { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + gap: var(--spacing-8); +} + +.ui-machine-form__coefs .ui-input { + background: var(--color-surface-sunken); + color: var(--color-text-secondary); +} + +.ui-machine-form .is-changed .ui-input, +.ui-machine-form .is-changed .ui-select { + background: color-mix(in srgb, var(--color-warning) 28%, var(--color-canvas)); +} + +.ui-machine-form__warn { + min-height: 0; + color: var(--color-warning); + font-size: var(--text-caption); +} + +.ui-machine-form__warn:empty { + display: none; +} + +.ui-machine-form__notice:empty { + display: none; +} + +.ui-machine-form__similar { + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--spacing-8) var(--spacing-12); +} + +.ui-machine-form__similar > summary { + cursor: pointer; + color: var(--color-text-secondary); + font-size: var(--text-body-sm); +} + +.ui-machine-form__similar .ui-find__list { + max-height: 240px; + overflow: auto; +} + +.ui-machine-form__preview { + display: flex; + flex-direction: column; + gap: var(--spacing-4); + padding: var(--spacing-12); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + background: var(--color-surface); + position: sticky; + top: 0; +} + +.ui-machine-form__preview .ui-calc-row--formula { + grid-template-columns: 64px minmax(0, 1fr) 96px; +} + +.ui-machine-form__rule { + border: 0; + border-top: 1px solid var(--color-border); + margin: var(--spacing-4) 0; + width: 100%; +} + +@media (max-width: 720px) { + .ui-machine-form { + grid-template-columns: minmax(0, 1fr); + } + + .ui-machine-form__preview { + position: static; + } +} diff --git a/ui_template/ui_template_machine_form.ts b/ui_template/ui_template_machine_form.ts new file mode 100644 index 000000000..494b51714 --- /dev/null +++ b/ui_template/ui_template_machine_form.ts @@ -0,0 +1,506 @@ +/* ============================================================================= + * ui_template_machine_form.ts + * 부품 「기계 양식」(PLAN 821-2 · 요구서 796 1 장) — M01 기계 상세 · M02 내 기계 · 불러오기가 같이 씀. + * + * 칸 = 이름 · 규격 / 가격(천원) / 손료계수(바로 넣기 · 품셈 방식) / 주연료(종류 고르기 + ℓ/hr) / + * 잡품 %(주연료의) / 조종원(직종 고르기 + 인) / 전력(kWh · 선택) · 「시간당 값 직접」 꼴(allowHourly) + * 옆 = 시간당 경비 계산식 즉시(`common_util_machine_coef` · 정본은 서버 식) + * 찾기 = 「비슷한 기계에서 시작」(findSimilar 를 주면) — 고르면 값 · 이름 · 규격 복사 + * 상태 = 숫자만(아니면 오류) · 범위 밖 경고 · 고친 칸 노랑 · 같은 이름 알림 자리(setNotice) · readOnly + * 자료 = 목록(연료 · 직종 · 단가) · 찾기 · 저장은 부르는 쪽이 줌 — 이 부품은 M01 · M02 에 안 묶임 + * 값 묶음 = 기계 줄 `값` 꼴 그대로(칸 이름 같음) · 안 보이는 칸(선원 등)은 손대지 않음 + * ========================================================================== */ + +import { + MACHINE_COEFS, + MACHINE_INPUTS, + machineCoefOf, + machineHourly, +} from "../common_util/common_util_machine_coef"; +import { createCalcFormula, createCalcFormulaRow } from "./ui_template_calc_row"; +import { el, createInputField, createSelectField } from "./ui_template_elements"; +import { createFindList } from "./ui_template_find_list"; +import { t as L } from "./ui_template_locale"; +import { createSegment } from "./ui_template_segment"; +import { createText } from "./ui_template_text"; +import "./ui_template_machine_form.css"; + +export type MachineValues = Record; + +/** 고르기 목록 한 칸 — 연료(값 = 종류 · 값 단가 원/ℓ) · 직종(값 = 코드 · 단가 원/일) */ +export interface MachinePick { + value: string; + text: string; + price: number | null; +} + +export interface MachineSimilar { + key: string; + name: string; + spec: string; + /** 흐린 꼬리표(구분 · 내 기계 등) */ + tag?: string; + values: MachineValues; +} + +export interface MachineFormOptions { + name?: string; + spec?: string; + values?: MachineValues; + /** 손료계수 방식 기본 — 값에 품셈 입력 다섯이 있으면 늘 품셈 방식 */ + coefMode?: "direct" | "pumsem"; + /** 「시간당 값 직접」 꼴 허용(내 기계) */ + allowHourly?: boolean; + fuels: MachinePick[]; + jobs: MachinePick[]; + /** 전력 단가(원/kWh) · 시간환산(조종원 하루 → 한 시간) */ + power?: number; + hour?: number; + readOnly?: boolean; + findSimilar?: (q: string) => Promise; + onSimilar?: (item: MachineSimilar) => void; + onChange?: () => void; +} + +export interface MachineFormState { + name: string; + spec: string; + values: MachineValues; + /** 숫자 아닌 칸 등 — 있으면 저장 막음 */ + errors: string[]; + changed: boolean; +} + +export interface MachineFormHandle { + root: HTMLElement; + state: () => MachineFormState; + /** 같은 이름 · 규격 알림 등(빈 글 = 지움) */ + setNotice: (text: string) => void; +} + +/** 시간당 값 직접 칸 · 비목 */ +export const HOURLY_KEY = "시간당"; +const HOURLY_COSTS = ["노무비", "재료비", "경비"] as const; +const HOURLY_LABEL = { 노무비: "MF_Labor", 재료비: "MF_Material", 경비: "MF_Expense" } as const; + +interface NumSpec { + key: string; + label: string; + unit: string; + min: number; + max: number; +} +const n = (key: string, label: string, unit: string, min: number, max: number): NumSpec => ({ + key, + label, + unit, + min, + max, +}); +const PRICE = n("가격", "MF_Price", "천원", 0, 5_000_000); +const COEF = n("손료계수", "MF_Coef", "10⁻⁷/hr", 1, 100_000); +const PUMSEM = [ + n("내용시간", "MF_Life", "시간", 100, 100_000), + n("연간표준가동시간", "MF_Yearly", "시간", 100, 8_760), + n("상각비율", "MF_Dep", "", 0, 1), + n("정비비율", "MF_Rep", "", 0, 3), + n("연간관리비율", "MF_Mgmt", "", 0, 1), +]; +const FUEL = n("주연료", "MF_Fuel", "ℓ/hr", 0, 2_000); +const MISC = n("잡재료율", "MF_Misc", "%", 0, 100); +const CREW = n("조종원", "MF_Crew", "인", 0, 20); +const POWER = n("전력", "MF_Power", "kWh", 0, 10_000); +const COEF_LABEL: Record = { + 상각비계수: "MF_DepCoef", + 정비비계수: "MF_RepCoef", + 관리비계수: "MF_MgmtCoef", + 손료계수: "MF_Coef", +}; + +const tr = (key: string): string => L(key as "MF_Name"); +const fmt = (v: number): string => v.toLocaleString("ko-KR", { maximumFractionDigits: 4 }); +const shown = (v: unknown): string => (v === null || v === undefined ? "" : String(v)); +const same = (a: unknown, b: unknown): boolean => JSON.stringify(a) === JSON.stringify(b); + +/** 글 → 수 · 빈 글 = null · 수 아님 = NaN */ +function parseNum(text: string): number | null { + const s = text.replace(/,/g, "").trim(); + if (!s) return null; + return /^-?\d+(\.\d+)?$/.test(s) ? Number(s) : Number.NaN; +} + +export function createMachineForm(opts: MachineFormOptions): MachineFormHandle { + const init: MachineValues = structuredClone(opts.values ?? {}); + let values: MachineValues = structuredClone(init); + let name = opts.name ?? ""; + let spec = opts.spec ?? ""; + const startName = name; + const startSpec = spec; + const hasPumsem = MACHINE_INPUTS.some((k) => typeof init[k] === "number"); + let mode: "direct" | "pumsem" = hasPumsem ? "pumsem" : (opts.coefMode ?? "direct"); + let hourlyMode = init[HOURLY_KEY] !== undefined && Boolean(opts.allowHourly); + const errors = new Map(); + + const root = el("div", { className: "ui-machine-form" }); + const fields = el("div", { className: "ui-machine-form__fields" }); + const side = el("aside", { className: "ui-machine-form__preview" }); + const notice = el("div", { className: "ui-machine-form__notice" }); + + /** 칸 값을 값 묶음에 — 빈 값은 원래 칸이 있었으면 null · 없었으면 칸을 뺌 */ + const put = (key: string, value: unknown): void => { + if (value === null || value === "") { + if (key in init) values[key] = null; + else delete values[key]; + } else values[key] = value; + }; + + const changed = (): boolean => name !== startName || spec !== startSpec || !same(values, init); + + /** 품셈 입력이 처음과 같으면 저장된 계수 그대로(원문 표 값) · 다르면 계수 짝으로 셈 */ + const syncCoefs = (): void => { + if (mode !== "pumsem") return; + const sameInputs = MACHINE_INPUTS.every((k) => same(values[k], init[k])); + const got = sameInputs ? null : machineCoefOf(values); + for (const k of MACHINE_COEFS) { + if (sameInputs) put(k, init[k] ?? null); + else put(k, got ? got[k] : null); + } + }; + + const fire = (): void => { + syncCoefs(); + paintPreview(); + paintCoefs(); + opts.onChange?.(); + }; + + /** 숫자 칸 — 숫자만 · 범위 밖 경고 · 고친 칸 노랑 */ + const numField = (spec_: NumSpec, read = false, hold?: MachineValues): HTMLElement => { + const bag = hold ?? values; + const field = createInputField({ + label: tr(spec_.label), + value: shown(bag[spec_.key]), + unit: spec_.unit || undefined, + size: 28, + }); + field.input.inputMode = "decimal"; + field.input.dataset.key = spec_.key; + const warn = el("span", { className: "ui-machine-form__warn" }); + field.root.append(warn); + const mark = (): void => { + const now = hold ? hold[spec_.key] : values[spec_.key]; + const was = hold + ? (init[HOURLY_KEY] as MachineValues | undefined)?.[spec_.key] + : init[spec_.key]; + field.root.classList.toggle("is-changed", !same(now ?? null, was ?? null)); + }; + if (read || opts.readOnly) field.input.readOnly = true; + field.input.addEventListener("input", () => { + const v = parseNum(field.input.value); + warn.textContent = ""; + if (Number.isNaN(v)) { + errors.set(spec_.key, `${tr(spec_.label)} · ${L("MF_NumberOnly")}`); + field.setError(L("MF_NumberOnly")); + } else { + errors.delete(spec_.key); + field.setError(); + if (v !== null && (v < spec_.min || v > spec_.max)) + warn.textContent = L("MF_Range").replace( + "{value}", + `${fmt(spec_.min)}~${fmt(spec_.max)}`, + ); + if (hold) { + if (v === null) delete hold[spec_.key]; + else hold[spec_.key] = v; + values[HOURLY_KEY] = { ...hold }; + } else put(spec_.key, v); + } + mark(); + fire(); + }); + mark(); + return field.root; + }; + + /** 고르기 칸 — 없음 + 목록 · 목록에 없는 지금 값도 한 칸(단가 없음) */ + const pickField = (key: string, label: string, list: MachinePick[]): HTMLElement => { + const now = shown(values[key]); + const options = [ + { value: "", text: L("MF_None") }, + ...list.map((p) => ({ value: p.value, text: p.text })), + ]; + if (now && !list.some((p) => p.value === now)) + options.push({ value: now, text: `${now} (${L("MF_NoPrice")})` }); + const field = createSelectField({ label: tr(label), options, value: now, size: 28 }); + field.select.dataset.key = key; + field.select.disabled = Boolean(opts.readOnly); + const mark = (): void => { + field.root.classList.toggle("is-changed", !same(values[key] ?? null, init[key] ?? null)); + }; + field.select.addEventListener("change", () => { + put(key, field.select.value || null); + mark(); + fire(); + }); + mark(); + return field.root; + }; + + const textField = ( + label: string, + get: () => string, + set: (v: string) => void, + was: string, + ): HTMLElement => { + const field = createInputField({ label: tr(label), value: get(), size: 28 }); + field.input.readOnly = Boolean(opts.readOnly); + field.input.addEventListener("input", () => { + set(field.input.value); + field.root.classList.toggle("is-changed", field.input.value !== was); + opts.onChange?.(); + }); + return field.root; + }; + + /* --- 손료계수 꼴 --- */ + const coefBox = el("div", { className: "ui-machine-form__group" }); + const coefOut = el("div", { className: "ui-machine-form__coefs" }); + const paintCoefs = (): void => { + if (mode !== "pumsem") return; + coefOut.replaceChildren( + ...MACHINE_COEFS.map((k) => { + const f = createInputField({ label: tr(COEF_LABEL[k]), value: shown(values[k]), size: 28 }); + f.input.readOnly = true; + f.input.tabIndex = -1; + f.root.classList.toggle("is-changed", !same(values[k] ?? null, init[k] ?? null)); + return f.root; + }), + ); + }; + const paintCoefBox = (): void => { + const pumsem = mode === "pumsem"; + coefBox.replaceChildren( + el("div", { + className: "ui-machine-form__row", + children: pumsem ? PUMSEM.map((s) => numField(s)) : [numField(COEF)], + }), + ...(pumsem ? [coefOut] : []), + ); + paintCoefs(); + }; + const coefSeg = createSegment({ + options: [ + { value: "direct", label: L("MF_CoefDirect") }, + { value: "pumsem", label: L("MF_CoefPumsem") }, + ], + value: mode, + size: 24, + ariaLabel: L("MF_Coef"), + onChange: (v) => { + mode = v as "direct" | "pumsem"; + if (mode === "direct") { + for (const k of [...MACHINE_INPUTS, ...MACHINE_COEFS.slice(0, 3)]) delete values[k]; + if (values["손료계수"] === undefined && init["손료계수"] !== undefined) + values["손료계수"] = init["손료계수"]; + } else for (const k of MACHINE_INPUTS) if (init[k] !== undefined) values[k] = init[k]; + paintCoefBox(); + fire(); + }, + }); + if (opts.readOnly) coefSeg.root.querySelectorAll("button").forEach((b) => (b.disabled = true)); + + /* --- 구성 / 시간당 값 직접 --- */ + const body = el("div", { className: "ui-machine-form__body" }); + const paintBody = (): void => { + if (hourlyMode) { + const hold = { ...((values[HOURLY_KEY] as MachineValues | undefined) ?? {}) }; + body.replaceChildren( + el("div", { + className: "ui-machine-form__row", + children: HOURLY_COSTS.map((k) => + numField(n(k, HOURLY_LABEL[k], "원/hr", 0, 10_000_000), false, hold), + ), + }), + ); + return; + } + paintCoefBox(); + body.replaceChildren( + numField(PRICE), + el("div", { + className: "ui-machine-form__group", + children: [ + el("div", { + className: "ui-machine-form__head", + children: [el("strong", { text: L("MF_Coef") }), coefSeg.root], + }), + coefBox, + ], + }), + el("div", { + className: "ui-machine-form__row", + children: [ + pickField("주연료종류", "MF_FuelKind", opts.fuels), + numField(FUEL), + numField(MISC), + ], + }), + el("div", { + className: "ui-machine-form__row", + children: [pickField("조종원직종", "MF_Job", opts.jobs), numField(CREW), numField(POWER)], + }), + ); + }; + const kindSeg = opts.allowHourly + ? createSegment({ + options: [ + { value: "build", label: L("MF_Build") }, + { value: "hourly", label: L("MF_HourlyDirect") }, + ], + value: hourlyMode ? "hourly" : "build", + size: 24, + onChange: (v) => { + hourlyMode = v === "hourly"; + if (hourlyMode) values[HOURLY_KEY] ??= {}; + else if (init[HOURLY_KEY] === undefined) delete values[HOURLY_KEY]; + paintBody(); + fire(); + }, + }) + : null; + + /* --- 비슷한 기계에서 시작 --- */ + const similarBox = (): HTMLElement[] => { + if (!opts.findSimilar || opts.readOnly) return []; + const find = createFindList({ placeholder: L("MF_SimilarFind") }); + const wrap = el("details", { + className: "ui-machine-form__similar", + children: [el("summary", { text: L("MF_Similar") }), find.root], + }); + let seq = 0; + let timer: number | undefined; + const look = async (): Promise => { + const mine = ++seq; + const got = await opts.findSimilar!(find.search.value.trim()).catch(() => []); + if (mine !== seq) return; + find.hint.textContent = got.length ? "" : L("MF_SimilarNone"); + find.setRows( + got.map((m) => ({ + key: m.key, + name: `${m.name} ${m.spec}`.trim(), + tag: m.tag, + sub: m.key, + onPick: () => { + values = { ...structuredClone(m.values) }; + name = m.name; + spec = m.spec; + mode = MACHINE_INPUTS.some((k) => typeof values[k] === "number") ? "pumsem" : mode; + coefSeg.set(mode); + hourlyMode = values[HOURLY_KEY] !== undefined && Boolean(opts.allowHourly); + kindSeg?.set(hourlyMode ? "hourly" : "build"); + wrap.open = false; + paintAll(); + setNotice(L("MF_SimilarCopied").replace("{value}", `${m.name} ${m.spec}`.trim())); + opts.onSimilar?.(m); + fire(); + }, + })), + ); + }; + find.search.addEventListener("input", () => { + window.clearTimeout(timer); + timer = window.setTimeout(() => void look(), 250); + }); + wrap.addEventListener("toggle", () => wrap.open && void look()); + return [wrap]; + }; + + /* --- 미리보기 --- */ + const paintPreview = (): void => { + const out = (v: number, key = false): HTMLElement => + el("span", { className: `ui-calc-row__out${key ? " is-key" : ""}`, text: fmt(v) }); + const line = (label: string, text: string, v: number, key = false): HTMLElement => + createCalcFormulaRow(label, text ? createCalcFormula(text) : null, out(v, key)); + const head = [ + el("strong", { text: L("MF_Preview") }), + createText(L("MF_PreviewNote"), "muted"), + ]; + if (hourlyMode) { + const h = (values[HOURLY_KEY] as Record | undefined) ?? {}; + const [a, b, c] = HOURLY_COSTS.map((k) => Number(h[k]) || 0); + side.replaceChildren( + ...head, + line(L("MF_Labor"), "", a), + line(L("MF_Material"), "", b), + line(L("MF_Expense"), "", c), + line(L("MF_Total"), "", a + b + c, true), + ); + return; + } + const fuel = opts.fuels.find((f) => f.value === values["주연료종류"])?.price ?? 0; + const wage = opts.jobs.find((j) => j.value === String(values["조종원직종"] ?? ""))?.price ?? 0; + const hour = opts.hour ?? 1 / 8; + const p = machineHourly(values, fuel, wage, opts.power ?? 0, hour); + const num = (k: string): string => fmt(Number(values[k]) || 0); + const rows = [ + line(L("MF_Loss"), `${num("가격")}천원 × 1,000 × ${num("손료계수")} × 10^-7^`, p.손료), + line(L("MF_Fuel"), `${num("주연료")}ℓ × ${fmt(fuel)}원`, p.주연료), + line(L("MF_Misc"), `${fmt(p.주연료)} × ${num("잡재료율")}%`, p.잡품), + line(L("MF_Crew"), `${num("조종원")}인 × ${fmt(wage)}원 × ${fmt(hour)}`, p.조종원), + ...(values["전력"] + ? [line(L("MF_Power"), `${num("전력")}kWh × ${fmt(opts.power ?? 0)}원`, p.전력)] + : []), + ]; + side.replaceChildren( + ...head, + ...rows, + el("hr", { className: "ui-machine-form__rule" }), + line(L("MF_Labor"), "", p.노무비), + line(L("MF_Material"), "", p.재료비), + line(L("MF_Expense"), "", p.경비), + line(L("MF_Total"), "", p.계, true), + ); + }; + + const setNotice = (text: string): void => { + notice.replaceChildren(...(text ? [createText(text, "warning")] : [])); + }; + + const top = el("div", { className: "ui-machine-form__row" }); + const paintAll = (): void => { + errors.clear(); + syncCoefs(); + top.replaceChildren( + textField( + "MF_Name", + () => name, + (v) => (name = v), + startName, + ), + textField( + "MF_Spec", + () => spec, + (v) => (spec = v), + startSpec, + ), + ); + paintBody(); + paintPreview(); + }; + fields.append(...similarBox(), notice, top, ...(kindSeg ? [kindSeg.root] : []), body); + root.append(fields, side); + root.classList.toggle("is-readonly", Boolean(opts.readOnly)); + paintAll(); + + return { + root, + state: () => ({ + name: name.trim(), + spec: spec.trim(), + values: structuredClone(values), + errors: [...errors.values()], + changed: changed(), + }), + setNotice, + }; +} diff --git a/ui_template/ui_template_ui_kit_parts.ts b/ui_template/ui_template_ui_kit_parts.ts index 32643e158..aeca68566 100644 --- a/ui_template/ui_template_ui_kit_parts.ts +++ b/ui_template/ui_template_ui_kit_parts.ts @@ -54,6 +54,7 @@ import { createRangeBar } from "./ui_template_range_bar"; import { createStat, statGrid } from "./ui_template_stat"; import { toastNode } from "./ui_template_toast"; import { FRAME_DEMOS } from "./ui_template_ui_kit_frames"; +import { createMachineForm } from "./ui_template_machine_form"; /** 상태 줄 다섯 칸 */ export const KIT_STATES = ["default", "hover", "active", "disabled", "error"] as const; @@ -321,6 +322,22 @@ function tabsDemo(s: KitState): HTMLElement | null { return box; } +/** 기계 양식 견본 — 굴착기 1.0㎥ 값(821-2) */ +const kitMachine = (readOnly: boolean): HTMLElement => + createMachineForm({ + name: "굴착기(무한궤도)", + spec: "1.0㎥", + values: { + ...{ 가격: 142069, 내용시간: 10000, 연간표준가동시간: 1250, 상각비율: 0.9, 정비비율: 0.7 }, + ...{ 연간관리비율: 0.1, 상각비계수: 900, 정비비계수: 700, 관리비계수: 485, 손료계수: 2085 }, + ...{ 주연료: 19.5, 주연료종류: "경유", 잡재료율: 22, 조종원: 1, 조종원직종: "1048" }, + }, + fuels: [{ value: "경유", text: "경유", price: 1846.39 }], + jobs: [{ value: "1048", text: "건설기계운전사", price: 283297 }], + readOnly, + findSimilar: async () => [], + }).root; + // prettier-ignore export const KIT_PARTS: KitPart[] = [ // ── 552-2 기본 ───────────────────────────────────────────── @@ -386,6 +403,8 @@ export const KIT_PARTS: KitPart[] = [ demo: (s) => (s === "default" ? col(createKv([{ label: "연장", value: "1,080 m", big: true }, { label: "종단 경사", value: "12 %", ok: true }, { label: "최소 곡선반경", value: "12 m", ok: false }, { label: "비고", value: null }]), createKv([{ label: kitKeys("Ctrl", "Z"), value: "되돌리기" }, { label: kitKeys("휠 끌기"), value: "화면 옮기기" }, { label: kitKeys("Esc") }], { rule: true })) : null) }, { key: "calc-row", name: "계산 줄", group: "compound", kinds: "값 줄(이름 · 값 112 · 덧칸) · 식 줄(이름 · 식 · 값) · 시트 줄(이름 · 식 · 값 · 꼬리) · 위 · 아래첨자 · 중요 결과 굵게", file: "ui_template_calc_row.ts", demo: (s) => (s === "default" ? kitCalc() : null) }, + { key: "machine-form", name: "기계 양식", group: "compound", kinds: "이름 · 규격 · 가격 · 손료계수(바로 넣기 · 품셈 방식) · 주연료 · 잡품 · 조종원 · 전력 · 시간당 값 직접 · 옆 시간당 계산식 · 비슷한 기계에서 시작 · 고친 칸 · 숫자만", file: "ui_template_machine_form.ts", + demo: (s) => (s === "default" || s === "disabled" ? kitMachine(s === "disabled") : null) }, { key: "equation", name: "수식", group: "compound", kinds: "분수(가로 줄 안 세로 쌓기) · 위 · 아래첨자 · × ÷ · 괄호 · % · 조건 칩 · 하위 로직 블록(접힘) · 한 줄 = 결과명 = 이름 식 = 값 식 = 결과 + 변수 풀이", file: "ui_template_equation.ts", demo: (s) => (s === "default" ? kitEquation() : null) }, { key: "hopyo-grid", name: "일위대가 격자", group: "compound", kinds: "호표 머리(이름 · 규격 · 단위 · 1 단위 합계) · 구성 줄(품명 · 규격 · 수량 · 단위 · 비목 단가 / 금액 · 비고) · 줄 꼬리표 품셈 · 고정 · 합계 줄 빈 줄 붉게", file: "ui_template_hopyo_grid.ts", demo: (s) => (s === "default" ? createHopyoGrid([{ key: "D", no: 17, name: "돌기슭막이 H=2.0", unit: "m", total: { sum: 121748.6, labor: 94447.5, material: 0, expense: 27301.1 }, lines: [{ name: "돌쌓기 찰쌓기", spec: "뒷길이 35cm", qty: 2.09, unit: "㎡", prices: { sum: 52995, labor: 41250, expense: 11745 }, amounts: { sum: 110759.6, labor: 86212.5, expense: 24547.1 }, note: "산근 1호표", tag: "품셈" }, { name: "야면석 채집 운반", spec: "계곡 내", qty: 0.45, unit: "㎥", prices: { sum: 24420, labor: 18300, expense: 6120 }, amounts: { sum: 10989, labor: 8235, expense: 2754 }, tag: "고정" }, { name: "잡재료", spec: "노무비의", qty: null, unit: "%", prices: {}, amounts: {}, note: "수량 없음", tag: "품셈" }] }]).root : null) },