eomsangdonandClaude Opus 5.5
8ca2f1cd6e
- 옛 「옵션 보이기 · 그룹」 화면을 정의 편집 화면으로 넓힘(시스템 관리자 고쳐 씀 · 다른 역할 읽기만) - 자료 손질 = 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
340 lines
12 KiB
TypeScript
340 lines
12 KiB
TypeScript
/* =============================================================================
|
|
* 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();
|
|
}
|