Aislo/B09_Estimation/draft/B09_Draft_Schedule_Panel.ts

/* =============================================================================
 * 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<string, Array<[string, string]>> = {
  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;
}