feat(M02): 48-2 구조물 옵션 정의 편집 화면 — 군 · 종류 · 옵션 · 선택지 · 배치 격자 · 그룹 형상 · 규칙 · 판 이력
- 옛 「옵션 보이기 · 그룹」 화면을 정의 편집 화면으로 넓힘(시스템 관리자 고쳐 씀 · 다른 역할 읽기만) - 자료 손질 = M02_SO_Def_Model.ts(정의 틀 48-1 꼴) · 시험 test_m02_so_def_model.py Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016PSXsvyDxjNmufteN5bqmt
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,339 @@
|
||||
/* =============================================================================
|
||||
* M02_SO_Def.ts
|
||||
* 구조물 정의 편집 화면(PLAN 48-2 · 메인 칸) — 왼쪽 구조물군 · 종류 목록(이름 바꿈 · 순서 · 안 씀) ·
|
||||
* 오른쪽 고른 종류(이름 · 안 씀 · 기준 측점 표시 · 옵션 · 배치 격자 · 그룹 · 규칙) ·
|
||||
* 아래 [저장](판 +1 · 시스템 관리자만) · 지난 판 목록(누르면 그 판을 읽기만으로 봄).
|
||||
* 다른 역할은 읽기만. 고칠 사본은 저장 전까지 서버에 안 감 · 정본 = `구조물정의.json`(48-1).
|
||||
* ========================================================================== */
|
||||
|
||||
import { createButton, createTag, el, showToast } from "@ui/ui_template_elements";
|
||||
import { StaleError } from "../M02_MasterTemplete_Api_Fetch";
|
||||
import {
|
||||
fetchStructureDef,
|
||||
fetchStructureDefAt,
|
||||
fetchStructureDefHistory,
|
||||
saveStructureDef,
|
||||
type DefVersion,
|
||||
} from "./M02_SO_Api";
|
||||
import { buildLayoutBlock } from "./M02_SO_Def_Layout";
|
||||
import {
|
||||
baseShown,
|
||||
clone,
|
||||
problems,
|
||||
stepFamily,
|
||||
stepType,
|
||||
type StructDef,
|
||||
} from "./M02_SO_Def_Model";
|
||||
import { buildOptionsBlock } from "./M02_SO_Def_Options";
|
||||
import { buildRulesBlock } from "./M02_SO_Def_Rules";
|
||||
import { checkBox, textBox } from "./M02_SO_Def_Ui";
|
||||
import { buildGroupBlock } from "./M02_SO_Groups";
|
||||
import { to } from "./M02_SO_Text";
|
||||
|
||||
export interface DefScreenOptions {
|
||||
/** 시스템 관리자 — 아니면 읽기만 */
|
||||
isAdmin: boolean;
|
||||
/** 메인 칸에 화면을 띄움 — 고침 표시 손잡이를 돌려받음 */
|
||||
show: (label: string, node: HTMLElement) => (dirty: boolean) => void;
|
||||
}
|
||||
|
||||
const why = (error: unknown): string => (error instanceof Error ? error.message : "");
|
||||
|
||||
/** 빈 묶음 걷어냄 — 그리기 중 만든 빈 그룹 목록 · 배치 · 종류 덧칸 */
|
||||
function tidy(def: StructDef): StructDef {
|
||||
const out = clone(def);
|
||||
for (const part of [out.그룹, out.배치, out.종류, out.표시] as Record<string, unknown>[])
|
||||
for (const [k, v] of Object.entries(part))
|
||||
if (Array.isArray(v) ? !v.length : !Object.keys(v as object).length) delete part[k];
|
||||
return out;
|
||||
}
|
||||
|
||||
/** 작은 단추 */
|
||||
function smallButton(
|
||||
label: string,
|
||||
run: () => void,
|
||||
off = false,
|
||||
variant: "ghost" | "danger" = "ghost",
|
||||
): HTMLButtonElement {
|
||||
const b = createButton({ label, variant, size: "sm" });
|
||||
b.disabled = off;
|
||||
b.addEventListener("click", run);
|
||||
return b;
|
||||
}
|
||||
|
||||
/** 화면을 받아 띄움 — 못 받으면 알림만 · 띄웠으면 참 */
|
||||
export async function openDefScreen(opt: DefScreenOptions): Promise<boolean> {
|
||||
let def: StructDef;
|
||||
try {
|
||||
def = await fetchStructureDef();
|
||||
} catch (error) {
|
||||
showToast(to("Load_Failed", why(error)), "error");
|
||||
return false;
|
||||
}
|
||||
drawDef(def, opt);
|
||||
return true;
|
||||
}
|
||||
|
||||
function drawDef(first: StructDef, opt: DefScreenOptions): void {
|
||||
/** 지금 판(서버) · 고칠 사본 · 보는 지난 판(있으면 읽기만) */
|
||||
let base = first;
|
||||
let work = clone(first);
|
||||
let past: StructDef | null = null;
|
||||
let dirty = false;
|
||||
let current: string | null = null;
|
||||
const open = new Set<string>(); // 선택지를 펼친 옵션
|
||||
let versions: DefVersion[] | null = null;
|
||||
|
||||
const shown = (): StructDef => past ?? work;
|
||||
const canEdit = (): boolean => opt.isAdmin && !past;
|
||||
const kindList = el("div", { className: "m02-opts__kinds", attrs: { "data-sod-kinds": "" } });
|
||||
const detail = el("div", { className: "m02-opts__list", attrs: { "data-sod-detail": "" } });
|
||||
const banner = el("div", { className: "m02-sod__banner", attrs: { "data-sod-banner": "" } });
|
||||
const issues = el("div", { className: "m02-sod__issues", attrs: { "data-sod-issues": "" } });
|
||||
const historyBox = el("div", {
|
||||
className: "m02-sod__history",
|
||||
attrs: { "data-sod-history": "" },
|
||||
});
|
||||
|
||||
const changed = (): void => {
|
||||
dirty = true;
|
||||
sync();
|
||||
paint();
|
||||
};
|
||||
|
||||
const paintKinds = (): void => {
|
||||
const d = shown();
|
||||
const edit = canEdit();
|
||||
const parts: HTMLElement[] = [];
|
||||
const families = Object.keys(d.구조물군);
|
||||
families.forEach((g, gi) => {
|
||||
parts.push(
|
||||
el("div", {
|
||||
className: "m02-sod__family",
|
||||
attrs: { "data-sod-family": g },
|
||||
children: [
|
||||
textBox(d.구조물군[g], (v) => (d.구조물군[g] = v), changed, {
|
||||
edit,
|
||||
attr: "data-sod-family-name",
|
||||
}),
|
||||
...(edit
|
||||
? [
|
||||
smallButton(to("GroupUp"), () => stepFamily(d, g, -1) && changed(), gi === 0),
|
||||
smallButton(
|
||||
to("GroupDown"),
|
||||
() => stepFamily(d, g, 1) && changed(),
|
||||
gi === families.length - 1,
|
||||
),
|
||||
]
|
||||
: []),
|
||||
],
|
||||
}),
|
||||
);
|
||||
const kinds = d.types.filter((t) => t.group === g);
|
||||
kinds.forEach((t, ti) => {
|
||||
const off = t.enabled === false;
|
||||
const groups = d.그룹[t.type_id]?.length ?? 0;
|
||||
const b = el("button", {
|
||||
className: `m02-opts__kind${t.type_id === current ? " is-active" : ""}${off ? " is-off" : ""}`,
|
||||
attrs: { type: "button", "data-sod-kind": t.type_id },
|
||||
children: [
|
||||
el("span", { text: t.name }),
|
||||
...(groups ? [createTag(to("GroupTag", String(groups)), "accent")] : []),
|
||||
...(off ? [createTag(to("Off"), "neutral")] : []),
|
||||
],
|
||||
});
|
||||
b.addEventListener("click", () => {
|
||||
current = t.type_id;
|
||||
paint();
|
||||
});
|
||||
parts.push(
|
||||
el("div", {
|
||||
className: "m02-sod__kindrow",
|
||||
children: [
|
||||
b,
|
||||
...(edit
|
||||
? [
|
||||
smallButton(
|
||||
to("GroupUp"),
|
||||
() => stepType(d, t.type_id, -1) && changed(),
|
||||
ti === 0,
|
||||
),
|
||||
smallButton(
|
||||
to("GroupDown"),
|
||||
() => stepType(d, t.type_id, 1) && changed(),
|
||||
ti === kinds.length - 1,
|
||||
),
|
||||
]
|
||||
: []),
|
||||
],
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
kindList.replaceChildren(...parts);
|
||||
};
|
||||
|
||||
const paintDetail = (): void => {
|
||||
const d = shown();
|
||||
const type = d.types.find((t) => t.type_id === current);
|
||||
if (!type) {
|
||||
detail.replaceChildren(el("p", { className: "m02-side__empty", text: to("Pick") }));
|
||||
return;
|
||||
}
|
||||
const edit = canEdit();
|
||||
const extra = (): NonNullable<StructDef["종류"][string]> => (d.종류[type.type_id] ??= {});
|
||||
detail.replaceChildren(
|
||||
el("div", {
|
||||
className: "m02-sod__kindhead",
|
||||
children: [
|
||||
textBox(type.name, (v) => (type.name = v), changed, {
|
||||
edit,
|
||||
attr: "data-sod-kind-name",
|
||||
cls: "m02-sod__name",
|
||||
}),
|
||||
el("small", { className: "m02-opts__key", text: type.type_id }),
|
||||
checkBox(to("Unused"), type.enabled === false, (v) => ((type.enabled = !v), changed()), {
|
||||
edit,
|
||||
attr: "data-sod-kind-off",
|
||||
}),
|
||||
checkBox(
|
||||
to("BaseStationShow"),
|
||||
baseShown(d, type.type_id),
|
||||
(v) => {
|
||||
if (v) delete extra().기준측점;
|
||||
else extra().기준측점 = false;
|
||||
changed();
|
||||
},
|
||||
{ edit, attr: "data-sod-base" },
|
||||
),
|
||||
...(d.종류[type.type_id]?.동작 ?? []).map((a) => {
|
||||
const tag = createTag(a, "neutral");
|
||||
tag.title = d.동작[a] ?? "";
|
||||
return tag;
|
||||
}),
|
||||
],
|
||||
}),
|
||||
buildOptionsBlock({ def: d, type, edit, open, changed }),
|
||||
buildLayoutBlock({ def: d, type, edit, changed }),
|
||||
buildGroupBlock({ list: (d.그룹[type.type_id] ??= []), edit, changed }),
|
||||
buildRulesBlock({ def: d, type, edit, changed }),
|
||||
);
|
||||
};
|
||||
|
||||
const paintFoot = (): void => {
|
||||
banner.replaceChildren(
|
||||
...(past
|
||||
? [
|
||||
el("span", { text: to("PastView", String(past.판)) }),
|
||||
smallButton(to("PastBack"), () => ((past = null), paint(), paintHistory())),
|
||||
]
|
||||
: [
|
||||
el("span", { text: to("Version", String(base.판)) }),
|
||||
...(opt.isAdmin ? [] : [createTag(to("ReadOnly"), "neutral")]),
|
||||
]),
|
||||
);
|
||||
banner.classList.toggle("is-past", !!past);
|
||||
const list = past ? [] : problems(work);
|
||||
issues.replaceChildren(...list.map((t) => el("p", { className: "m02-sod__bad", text: t })));
|
||||
save.disabled = !opt.isAdmin || !!past || !dirty || list.length > 0;
|
||||
};
|
||||
|
||||
const paint = (): void => {
|
||||
paintKinds();
|
||||
paintDetail();
|
||||
paintFoot();
|
||||
};
|
||||
|
||||
const reload = async (): Promise<void> => {
|
||||
try {
|
||||
base = await fetchStructureDef();
|
||||
work = clone(base);
|
||||
dirty = false;
|
||||
sync();
|
||||
} catch (again) {
|
||||
showToast(to("Load_Failed", why(again)), "error");
|
||||
}
|
||||
};
|
||||
|
||||
const save = createButton({ label: to("Save"), variant: "filled" });
|
||||
save.setAttribute("data-sod-save", "");
|
||||
save.addEventListener("click", async () => {
|
||||
if (problems(work).length) return;
|
||||
save.disabled = true; // 연달아 눌러도 한 번만
|
||||
try {
|
||||
base = await saveStructureDef(base.판, tidy(work));
|
||||
work = clone(base);
|
||||
dirty = false;
|
||||
versions = null;
|
||||
sync();
|
||||
showToast(to("SavedVersion", String(base.판)), "success");
|
||||
} catch (error) {
|
||||
if (error instanceof StaleError) {
|
||||
showToast(to("Stale"), "error");
|
||||
await reload();
|
||||
} else showToast(to("Failed", why(error)), "error");
|
||||
} finally {
|
||||
paint();
|
||||
paintHistory();
|
||||
}
|
||||
});
|
||||
|
||||
/** 지난 판 목록 — 펼칠 때 받음 · 누르면 그 판을 읽기만으로 */
|
||||
const paintHistory = (): void => {
|
||||
if (!versions) return historyBox.replaceChildren();
|
||||
historyBox.replaceChildren(
|
||||
...(versions.length
|
||||
? versions.map((v) => {
|
||||
const b = createButton({
|
||||
label: to("PastItem", `${v.판} · ${v.저장일}`),
|
||||
variant: past?.판 === v.판 ? "filled" : "ghost",
|
||||
size: "sm",
|
||||
});
|
||||
b.setAttribute("data-sod-past", String(v.판));
|
||||
b.addEventListener("click", async () => {
|
||||
try {
|
||||
past = await fetchStructureDefAt(v.판);
|
||||
} catch (error) {
|
||||
return showToast(to("Load_Failed", why(error)), "error");
|
||||
}
|
||||
paint();
|
||||
paintHistory();
|
||||
});
|
||||
return b;
|
||||
})
|
||||
: [el("p", { className: "m02-side__empty", text: to("PastNone") })]),
|
||||
);
|
||||
};
|
||||
const history = createButton({ label: to("PastList"), variant: "ghost" });
|
||||
history.setAttribute("data-sod-history-toggle", "");
|
||||
history.addEventListener("click", async () => {
|
||||
if (versions) {
|
||||
versions = null;
|
||||
return paintHistory();
|
||||
}
|
||||
try {
|
||||
versions = (await fetchStructureDefHistory()).sort((a, b) => b.판 - a.판);
|
||||
} catch (error) {
|
||||
return showToast(to("Load_Failed", why(error)), "error");
|
||||
}
|
||||
paintHistory();
|
||||
});
|
||||
|
||||
const node = el("div", {
|
||||
className: "m02-opts m02-sod",
|
||||
children: [
|
||||
el("p", { className: "m02-side__empty", text: to("DefNote") }),
|
||||
banner,
|
||||
el("div", { className: "m02-opts__panes", children: [kindList, detail] }),
|
||||
issues,
|
||||
el("div", {
|
||||
className: "m02-side__row",
|
||||
children: [...(opt.isAdmin ? [save] : []), history],
|
||||
}),
|
||||
historyBox,
|
||||
],
|
||||
});
|
||||
const setDirty = opt.show(to("Screen"), node);
|
||||
const sync = (): void => setDirty(dirty);
|
||||
paint();
|
||||
}
|
||||
Reference in New Issue
Block a user