/* ============================================================================= * B09_Draft_Schedule_Panel.ts * B09 왼쪽 패널 「공기 옵션」 카드(PLAN 264-1 · 사용자 164-2 · 초안 — draft 폴더째 지우면 사라짐). * 등록 = `B09_Draft_Schedule_UI` 가 DRAFT.panels(카드) · DRAFT.extend(값 맞춤)에 넣음 — * 본 코드 훅 = `…_UI_Shell` 이 「데이터 점검」 아래 · [저장] 묶음 위에 붙이는 한 줄 * 값 = user.schedule(캐시 → [저장] 한 번에) · 공기산출 · 공기집계 표 칸과 같은 값(어디서 고쳐도 한 벌) * 꼴 = 좌측 패널 공용 카드(269 · createPanelCard · 공용 칸 · 체크박스) — draft 덧칠 CSS 없음 * ========================================================================== */ import { createPanelCard } from "@ui/ui_template_collapsible"; import { createInputField, createSelectField } from "@ui/ui_template_elements"; import { createCheckbox } from "@ui/ui_template_checkbox"; import { num, type Row } from "../B09_Estimation_Calc_Base"; import { parseNumber } from "../B09_Estimation_UI_Tabs"; import { DEFAULTS } from "./B09_Draft_Schedule_Calc"; type Sync = (mine: Row, src: Row) => void; const HOLIDAY_LABELS: Array<[string, string]> = [ ["substitute", "대체공휴일"], ["election", "선거일"], ["labor", "근로자의 날(노동절)"], ["constitution", "제헌절"], ]; const CHOICES: Record> = { rest: [ ["sun", "일요일만"], ["satsun", "토 · 일"], ], machine_basis: [ ["max", "단위당 시간이 가장 긴 장비"], ["sum", "장비 시간 합(차례로 일하는 장비)"], ], c_round: [ ["none", "그대로"], ["round1", "소수 1자리 반올림"], ], last_off: [ ["ratio", "쓴 비율만큼 올림"], ["all", "그 달 비작업 전부"], ], }; /** 지금 화면의 카드 맞춤 — 셈마다 DRAFT.extend 가 부름(카드를 다시 만들면 새 카드로) */ let syncNow: Sync | null = null; export function syncSchedulePanel(payload: Row, user: Row): void { syncNow?.(user.schedule || {}, payload.inputs?.schedule || {}); } /** 두 칸 줄 — 공용 줄 class 가 없어 자리에서(draft 폴더째 지우면 사라짐) · * 바깥 div 는 꾸밈 없음 = 카드 접기(`display: none`)가 먹게 */ function pair(...items: HTMLElement[]): HTMLDivElement { const row = document.createElement("div"); row.style.cssText = "display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-8)"; row.append(...items); const outer = document.createElement("div"); outer.append(row); return outer; } export function createSchedulePanel(user: () => Row, setUser: (next: Row) => void): HTMLElement { const syncs: Sync[] = []; const change = (fn: (s: Row) => void): void => { const next: Row = structuredClone(user().schedule || {}); fn(next); setUser({ ...user(), schedule: next }); }; /** 수 칸 — 빈칸 · 기본값 = 지움(기본) · 범위 밖 = 되돌림 */ const number = (key: string, label: string, min: number, max: number): HTMLElement => { const { root, input } = createInputField({ label, type: "number", compact: true, min, max }); input.step = "any"; input.dataset.b09Schedule = key; let last: Row = {}; syncs.push((mine) => { last = mine; input.value = String(num(mine[key]) ?? DEFAULTS[key]); }); input.addEventListener("change", () => { const v = parseNumber(input.value); if (v === undefined || (v !== null && (v < min || v > max))) { input.value = String(num(last[key]) ?? DEFAULTS[key]); return; } change((s) => { if (v === null || v === DEFAULTS[key]) delete s[key]; else s[key] = v; }); }); return root; }; /** 고르기 칸 — 첫째 = 기본(고르면 지움) · options 없으면 원천에서(기후 자료) */ const choose = (key: string, label: string, options?: Array<[string, string]>): HTMLElement => { const { root, select, setOptions } = createSelectField({ label, options: [], compact: true }); select.dataset.b09Schedule = key; let values: string[] = []; syncs.push((mine, src) => { const list = options ?? Object.entries((src.climates || {}) as Row).map(([id, c]): [string, string] => [ id, c.name || id, ]); if (list.map(([v]) => v).join() !== values.join()) { values = list.map(([v]) => v); setOptions(list.map(([value, text]) => ({ value, text }))); } select.value = values.includes(mine[key]) ? mine[key] : (values[0] ?? ""); }); select.addEventListener("change", () => change((s) => { if (select.value === values[0]) delete s[key]; else s[key] = select.value; }), ); return root; }; const startField = createInputField({ label: "착공일", type: "date", compact: true }); const start = startField.input; start.dataset.b09Schedule = "start"; syncs.push((mine, src) => { const at: Row = { ...(src.start || {}), ...(mine.start || {}) }; const pad = (n: unknown): string => String(Number(n) || 1).padStart(2, "0"); start.value = at.year ? `${at.year}-${pad(at.month)}-${pad(at.day)}` : ""; }); start.addEventListener("change", () => { const hit = /^(\d{4})-(\d{2})-(\d{2})$/.exec(start.value); change((s) => { if (!hit) return void delete s.start; const day = Number(hit[3]); s.start = { year: Number(hit[1]), month: Number(hit[2]), ...(day > 1 ? { day } : {}) }; }); }); const checks = HOLIDAY_LABELS.map(([kind, label]) => { const { root, input } = createCheckbox(label); input.dataset.b09Holiday = kind; syncs.push((mine) => { input.checked = !(mine.holiday_off || []).includes(kind); }); input.addEventListener("change", () => change((s) => { const off = HOLIDAY_LABELS.map(([k]) => k).filter((k) => k === kind ? !input.checked : (s.holiday_off || []).includes(k), ); if (off.length) s.holiday_off = off; else delete s.holiday_off; }), ); return root; }); const holidayBox = document.createElement("div"); holidayBox.className = "ui-field"; const holidayCaption = document.createElement("span"); holidayCaption.className = "ui-field__label"; holidayCaption.textContent = "공휴일 넣기(그 밖 법정공휴일은 늘 넣음)"; holidayBox.append(holidayCaption, ...checks); const section = createPanelCard("공기 옵션"); section.dataset.b09SchedulePanel = ""; section.style.display = "none"; // 원천(서버 공기 자료)이 오면 보임 · hidden 은 공용 카드 flex 가 덮음 section.append( startField.root, choose("climate_set", "기후 자료(달마다 덮개는 공기집계 표)"), choose("rest", "쉬는 날", CHOICES.rest), holidayBox, number("hours", "일 작업시간(시간)", 0.5, 24), pair( number("units", "장비 기본 대수", 0.001, 1e4), number("crew", "인력 기본 인원", 0.001, 1e4), ), pair( number("prep_docs", "서류 · 착수 준비(일)", 0, 1000), number("prep_setup", "공종별 준비(일)", 0, 1000), ), pair(number("tidy", "정리(일)", 0, 1000), number("etc", "기타 · 현장여건(일)", 0, 1000)), pair( number("rate_haul", "반영률 운반공(%)", 0, 100), number("rate_base", "반영률 그 밖(%)", 0, 100), ), choose("machine_basis", "주 장비 기준", CHOICES.machine_basis), choose("c_round", "중복일수 C 끝수", CHOICES.c_round), choose("last_off", "마지막 달 비작업일", CHOICES.last_off), ); syncNow = (mine, src) => { section.style.display = src.climates ? "" : "none"; for (const sync of syncs) sync(mine, src); }; syncNow(user().schedule || {}, {}); return section; }