ypshimandClaude Haiku 5.5
17b5b24682
- A 열 is one row across the footing width; each has its own count along the length. Default floor((L − 1400) / 2250) + 1 per 열, as in spec §4.6. - Counts are validated: one per 열, whole numbers 2–30. Spacing below the 2250 mm minimum is shown as a warning, not refused (the plan's 6본 → 5@1800 example). - PierInput gains an optional pileRows; absent means the defaults, so existing files and the P1 results are unchanged. - Change tracking compares arrays by value; 열별 본수 can be reverted and copied (copy item off by default). - The footing card has −/+ per 열 with spacing, total, and the display string. - Tests: defaults 4열 × 5본 = 20 and the 1단계 text; 6본 → 5@1800; limits; model-level 21 piles. - Not verified in a browser. Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
336 lines
16 KiB
HTML
336 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Pierzainer — 형상 생성</title>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<header class="top">
|
|
<div class="brand">
|
|
<strong>Pierzainer</strong>
|
|
<span>교각 설계</span>
|
|
<span id="project-line" class="proj">프로젝트 미지정</span>
|
|
</div>
|
|
<nav class="steps" aria-label="단계">
|
|
<button id="nav-shape" class="step current" type="button" aria-current="step">① 형상 생성 <em id="step1-status">미생성</em></button>
|
|
<button id="nav-plan" class="step" type="button">② 형상계획 <em id="step2-status">예정</em></button>
|
|
<span class="step" aria-disabled="true">③ 철근배근 <em>예정</em></span>
|
|
</nav>
|
|
<div class="actions">
|
|
<span id="save-status" class="savest">저장 전</span>
|
|
<button id="save-project" class="btn-s" type="button" disabled title="프로젝트 파일 저장 (Ctrl+S)">저장</button>
|
|
<button id="open-import" class="btn-s" type="button">엑셀 불러오기</button>
|
|
<button id="open-project" class="btn-s" type="button">프로젝트 열기</button>
|
|
<button id="regen" class="btn-p" type="button" disabled>선택 교각 형상 생성</button>
|
|
<input id="project-file" type="file" accept=".json" hidden />
|
|
</div>
|
|
</header>
|
|
|
|
<p id="status" class="status-line" role="status" aria-live="polite">엑셀을 불러오면 교각 형상을 생성합니다.</p>
|
|
<div id="backup-banner" class="status-line" hidden>
|
|
<span id="backup-text"></span>
|
|
<button id="restore-backup" class="btn small" type="button">복구</button>
|
|
<button id="discard-backup" class="btn small" type="button">버리기</button>
|
|
</div>
|
|
|
|
<main class="grid" id="view-shape">
|
|
<aside class="panel piers" aria-labelledby="pier-title">
|
|
<p id="pier-title" class="lbl">교각 목록</p>
|
|
<div class="pier-tools">
|
|
<label>형식
|
|
<select id="type-filter"></select>
|
|
</label>
|
|
<button id="select-all" class="lnk" type="button">전체 선택</button>
|
|
</div>
|
|
<div class="phead" aria-hidden="true"><span></span><span>교각</span><span>상태</span></div>
|
|
<ul id="pier-items" class="pier-items"></ul>
|
|
<p id="pier-empty" class="muted">불러온 교각이 없습니다.</p>
|
|
<p class="pnote">시트 1장 = 교각 1기입니다. 오류가 난 교각만 건너뛰고 나머지는 생성합니다.</p>
|
|
<div class="bulk">
|
|
<b id="bulk-count">선택 0기</b>
|
|
<span class="grow"></span>
|
|
<button id="bulk-copy" class="btn-o" type="button" disabled title="2단계에서 구현">속성 복사…</button>
|
|
<button id="bulk-regen" class="btn-o" type="button" disabled>선택 교각 다시 생성</button>
|
|
</div>
|
|
|
|
<section class="pier-input" aria-labelledby="input-title">
|
|
<p id="input-title" class="lbl">입력값</p>
|
|
<dl id="inputs" class="kv wide"></dl>
|
|
<section class="edit-card" aria-labelledby="edit-title">
|
|
<h3 id="edit-title">코핑·말뚝 입력 수정</h3>
|
|
<div id="edit-fields"></div>
|
|
<p id="edit-summary" class="muted small"></p>
|
|
<button id="edit-regen" class="btn primary" type="button" disabled>다시 생성 · 변경 0</button>
|
|
</section>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="panel viewer" aria-labelledby="viewer-title">
|
|
<div class="viewer-head">
|
|
<h2 id="viewer-title">교각 3D 뷰</h2>
|
|
<div id="views" class="views" role="group" aria-label="시점"></div>
|
|
<span id="origin" class="muted"></span>
|
|
</div>
|
|
<div id="canvas" class="canvas" aria-label="교각 3D 뷰"></div>
|
|
<fieldset class="parts">
|
|
<legend>부재 표시</legend>
|
|
<div id="parts"></div>
|
|
</fieldset>
|
|
</section>
|
|
|
|
<aside class="panel results" aria-labelledby="result-title">
|
|
<h2 id="result-title">계산 결과</h2>
|
|
<section aria-labelledby="sec-axis">
|
|
<h3 id="sec-axis">교각축 · 코핑</h3>
|
|
<dl id="res-axis" class="kv"></dl>
|
|
</section>
|
|
<section aria-labelledby="sec-column">
|
|
<h3 id="sec-column">기둥</h3>
|
|
<dl id="res-column" class="kv"></dl>
|
|
</section>
|
|
<section aria-labelledby="sec-found">
|
|
<h3 id="sec-found">기초</h3>
|
|
<dl id="res-found" class="kv"></dl>
|
|
</section>
|
|
<section aria-labelledby="sec-issues">
|
|
<h3 id="sec-issues">알림 · 정보 <span id="issue-count" class="muted"></span></h3>
|
|
<ul id="issues" class="issues"></ul>
|
|
<p class="muted small">오류(E)는 생성 중단, 경고(W)는 생성 후 표시, 정보(I)는 참고용입니다.</p>
|
|
</section>
|
|
<details>
|
|
<summary>기본값 · 미구현 규칙</summary>
|
|
<ul id="defaults" class="issues"></ul>
|
|
</details>
|
|
</aside>
|
|
</main>
|
|
|
|
<main class="grid plan" id="view-plan" hidden>
|
|
<aside class="panel piers" aria-labelledby="plan-pier-title">
|
|
<p id="plan-pier-title" class="lbl">교각 목록</p>
|
|
<div class="phead" aria-hidden="true"><span></span><span>교각</span><span>변경</span></div>
|
|
<ul id="plan-pier-items" class="pier-items"></ul>
|
|
<p class="lbl members-title">부재 · 5개</p>
|
|
<ul id="members" class="members"></ul>
|
|
</aside>
|
|
|
|
<section class="panel viewer" aria-labelledby="member-title">
|
|
<div class="viewer-head">
|
|
<h2 id="member-title">코핑</h2>
|
|
</div>
|
|
<p id="member-summary" class="num"></p>
|
|
<div id="member-options" class="shape-options"></div>
|
|
<div id="member-fields"></div>
|
|
<p id="member-note" class="muted small"></p>
|
|
<button id="member-regen" class="btn primary" type="button" disabled>다시 생성 · 변경 0</button>
|
|
</section>
|
|
|
|
<aside class="panel results" aria-labelledby="changes-title">
|
|
<h2 id="changes-title">기본값 대비 변경</h2>
|
|
<ul id="changes" class="issues"></ul>
|
|
<h2>알림</h2>
|
|
<ul id="plan-issues" class="issues"></ul>
|
|
</aside>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
<dialog id="import-dialog" aria-labelledby="dlg-title">
|
|
<header class="dlg-head">
|
|
<h2 id="dlg-title">엑셀 불러오기</h2>
|
|
<ol class="dlg-steps">
|
|
<li>1 파일 선택</li>
|
|
<li>2 인식 결과 · 미리보기</li>
|
|
<li>3 형상 생성</li>
|
|
</ol>
|
|
<button id="dlg-close" class="btn small" type="button">닫기</button>
|
|
</header>
|
|
|
|
<div class="dlg-body">
|
|
<div class="dlg-col">
|
|
<section>
|
|
<h3>프로젝트</h3>
|
|
<label class="field">프로젝트명 · 필수
|
|
<input id="project-name" type="text" required />
|
|
</label>
|
|
<label class="field">교량명
|
|
<input id="bridge-name" type="text" />
|
|
</label>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>파일</h3>
|
|
<div id="drop" class="drop">
|
|
<p>다른 .xlsx 파일을 끌어놓거나</p>
|
|
<div class="drop-actions">
|
|
<button id="pick-file" class="btn small" type="button">파일 선택</button>
|
|
<button id="pick-sample" class="btn small" type="button">샘플 P1 사용</button>
|
|
</div>
|
|
<input id="file" type="file" accept=".xlsx" hidden />
|
|
</div>
|
|
<p id="file-name" class="muted small"></p>
|
|
<button id="download-template" class="btn small" type="button">입력 템플릿 다운로드 (.xlsx)</button>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>시트별 인식 결과</h3>
|
|
<ul id="sheets" class="sheet-list"></ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>작성 규칙</h3>
|
|
<ul class="rules">
|
|
<li>교각 1기 = 시트 1장을 기본으로 하며, 한 시트에 여러 기를 넣어도 됩니다.</li>
|
|
<li>표는 머리글 문자열로 찾으므로 위치는 자유입니다.</li>
|
|
<li>수식 셀은 계산된 값을 읽습니다.</li>
|
|
<li>방위각은 75°56'55.9" 형식으로 적습니다.</li>
|
|
</ul>
|
|
<h4>엑셀 열 이름 → 화면 용어</h4>
|
|
<table class="terms">
|
|
<tbody>
|
|
<tr><th>두부보</th><td>코핑</td></tr>
|
|
<tr><th>대좌블럭</th><td>받침블럭</td></tr>
|
|
<tr><th>저판</th><td>확대기초</td></tr>
|
|
<tr><th>받침</th><td>교량받침</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="dlg-col">
|
|
<section>
|
|
<h3>미리보기</h3>
|
|
<p id="preview-title" class="muted"></p>
|
|
<h4>교각 정보</h4>
|
|
<table id="pv-pier" class="grid-table"><tbody></tbody></table>
|
|
<h4>받침</h4>
|
|
<table id="pv-bearings" class="grid-table">
|
|
<thead><tr><th>번호</th><th>x (m)</th><th>y (m)</th><th>z (m)</th><th>방위각</th><th>위치</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<h4>IP</h4>
|
|
<table id="pv-ips" class="grid-table">
|
|
<thead><tr><th>점</th><th>x (m)</th><th>y (m)</th><th>꺾임각</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="dlg-foot">
|
|
<span id="dlg-selected" class="muted"></span>
|
|
<button id="dlg-cancel" class="btn" type="button">취소</button>
|
|
<button id="dlg-apply" class="btn primary" type="button" disabled>선택한 교각 0기 형상 생성</button>
|
|
</footer>
|
|
</dialog>
|
|
|
|
<dialog id="save-dialog" aria-labelledby="sv-title">
|
|
<header class="dlg-head">
|
|
<h2 id="sv-title">프로젝트 정보 · 저장</h2>
|
|
<button id="sv-close" class="btn small" type="button">닫기</button>
|
|
</header>
|
|
<div class="dlg-body">
|
|
<div class="dlg-col">
|
|
<section>
|
|
<h3>프로젝트 정보</h3>
|
|
<label class="field">프로젝트명 · 필수
|
|
<input id="sv-name" type="text" required />
|
|
</label>
|
|
<label class="field">교량명
|
|
<input id="sv-bridge" type="text" />
|
|
</label>
|
|
<label class="field">발주처
|
|
<input id="sv-client" type="text" />
|
|
</label>
|
|
<label class="field">작성자
|
|
<input id="sv-author" type="text" />
|
|
</label>
|
|
<label class="field">좌표계
|
|
<input id="sv-crs" type="text" value="국토좌표계 (x = 동, y = 북)" readonly />
|
|
</label>
|
|
<label class="field">메모
|
|
<textarea id="sv-memo" rows="3"></textarea>
|
|
</label>
|
|
</section>
|
|
</div>
|
|
<div class="dlg-col">
|
|
<section>
|
|
<h3>프로젝트 파일로 저장</h3>
|
|
<p>파일 이름 <code id="sv-file"></code></p>
|
|
<h4>파일에 담기는 내용</h4>
|
|
<ul class="rules">
|
|
<li>프로젝트 정보와 엑셀 입력값 (교각·IP·받침)</li>
|
|
<li>교각별 기본값과 현재 입력 (기본값 대비 변경 내역)</li>
|
|
<li>3D 형상은 담지 않고, 파일을 열 때 입력값으로 다시 생성합니다</li>
|
|
</ul>
|
|
<p class="muted small">처음 저장할 때만 이 창이 열립니다. 이후에는 헤더의 저장(Ctrl+S)이 같은 파일에 바로 저장합니다.</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<footer class="dlg-foot">
|
|
<button id="sv-cancel" class="btn" type="button">취소</button>
|
|
<button id="sv-save" class="btn primary" type="button">저장</button>
|
|
</footer>
|
|
</dialog>
|
|
|
|
<dialog id="copy-dialog" aria-labelledby="cp-title">
|
|
<header class="dlg-head">
|
|
<h2 id="cp-title">속성 복사</h2>
|
|
<p class="muted small">한 교각의 설정을 여러 교각에 한 번에 적용합니다</p>
|
|
<button id="cp-close" class="btn small" type="button">닫기</button>
|
|
</header>
|
|
<div class="dlg-body">
|
|
<div class="dlg-col">
|
|
<section>
|
|
<h3>1 · 원본 교각</h3>
|
|
<p id="cp-source" class="num"></p>
|
|
<p class="muted small">현재 입력값 기준 (미반영 변경 포함)</p>
|
|
</section>
|
|
<section>
|
|
<h3>2 · 복사할 항목</h3>
|
|
<ul class="cp-items">
|
|
<li><span class="cp-group">코핑</span>
|
|
<label class="chk"><input type="checkbox" data-item="coping-width" />폭 B</label>
|
|
<label class="chk"><input type="checkbox" data-item="coping-length" />길이 L <span class="muted small">교각마다 다름 · 기본 해제</span></label>
|
|
</li>
|
|
<li><span class="cp-group">확대기초 · 말뚝</span>
|
|
<label class="chk"><input type="checkbox" data-item="pile-length" />말뚝 길이 <span class="muted small">지반마다 다름 · 기본 해제</span></label>
|
|
<label class="chk"><input type="checkbox" data-item="pile-rows" />열별 본수 <span class="muted small">기초 크기마다 다름 · 기본 해제</span></label>
|
|
<label class="chk disabled"><input type="checkbox" disabled />기초 형상 · 치수 · 버림 <span class="muted small">예정</span></label>
|
|
</li>
|
|
<li><span class="cp-group">기둥 · 받침 · 철근배근</span>
|
|
<label class="chk disabled"><input type="checkbox" disabled />기둥 단면 · 지름 D, 받침·받침블럭, 배근 <span class="muted small">예정</span></label>
|
|
</li>
|
|
</ul>
|
|
<p class="muted small">복사하지 않는 값: 좌표 · IP · 받침 EL · 코핑 상면 EL · 기초 하단 EL · 지반고 · 기둥 높이 · 말뚝 선단 EL · 계단 구간</p>
|
|
</section>
|
|
<section>
|
|
<h3>3 · 대상 교각</h3>
|
|
<label class="chk"><input id="cp-same-type" type="checkbox" checked />원본과 같은 형식만 보기</label>
|
|
<ul id="cp-targets" class="cp-targets"></ul>
|
|
</section>
|
|
</div>
|
|
<div class="dlg-col">
|
|
<section>
|
|
<h3>4 · 적용 미리보기</h3>
|
|
<table id="cp-preview" class="grid-table">
|
|
<thead><tr><th>대상</th><th>형식</th><th>바뀌는 값</th><th>건너뜀</th><th>내용</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<label class="chk"><input id="cp-regen" type="checkbox" checked />적용 후 대상 교각 형상까지 바로 다시 생성</label>
|
|
<p class="muted small">적용하면 대상 교각마다 "변경 n건"이 표시되고, 입력 수정 카드에서 항목별로 되돌릴 수 있습니다.</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<footer class="dlg-foot">
|
|
<span id="cp-summary" class="muted"></span>
|
|
<button id="cp-cancel" class="btn" type="button">취소</button>
|
|
<button id="cp-apply" class="btn-p" type="button" disabled>대상 0기에 적용</button>
|
|
</footer>
|
|
</dialog>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|