Pier_v1/Code/교각모델링앱/web/templates/confirm_matched.html

{% extends "base.html" %}
{% from "_prism.html" import st_badge %}
{% block title %}일치 묶음 일괄 확정{% endblock %}
{% block body %}
<div class="prism">
  <div class="stack">
    <div class="stack" style="gap:var(--prism-space-100)">
      <span class="eyebrow">입력 묶음 · 일괄 확정</span>
      <h1 style="font-size:var(--prism-type-title);color:var(--prism-text-heading);margin:0">앱 확인 '일치' 묶음 일괄 확정</h1>
    </div>
    {% if targets %}
    <section class="strip">
      <p class="concl">일치 {{ targets|length }}개를 확정합니다. 주의·불일치·근거 없음·미확인 {{ rest|length }}개는 대상이 아닙니다.</p>
      <p class="cap">근거표를 <b>끝까지 내려</b> 읽어야 확정할 수 있습니다. 확정 기록에는 입력한 이름만 남고, 앱은 확정하지 않습니다.</p>
    </section>
    <h3>근거표 <span class="cap muted">끝까지 내려 확인합니다</span></h3>
    <div class="scroll" id="sc" tabindex="0" role="region" aria-label="일치 묶음 근거표" style="max-height:20rem">
      <table class="t">
        <caption style="position:absolute;left:-999rem">일치 묶음 근거</caption>
        <thead><tr><th scope="col">묶음</th><th scope="col">근거</th><th scope="col">출처·위치</th></tr></thead>
        <tbody>
        {% for t in targets %}
          {% set c = (t.chk.checks | selectattr('st', 'equalto', 'g') | selectattr('strength', 'in', ['S', 'F', 'C']) | list) %}
          <tr><td><b>{{ t.file }}.{{ t.key }}</b></td><td>{% if c %}{{ c[0].id }} {{ c[0].text }}{% else %}{{ t.chk.summary }}{% endif %}</td>
              <td>{% if c and c[0].pos %}<span class="chip">{{ c[0].pos }}</span>{% endif %}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    <details class="card sunken">
      <summary style="min-height:2.75rem;display:flex;align-items:center;cursor:pointer;font-weight:700">제외된 묶음 {{ rest|length }}개 — 누르면 사유를 봅니다</summary>
      <table class="t"><thead><tr><th scope="col">묶음</th><th scope="col">앱 확인</th><th scope="col">사유</th></tr></thead><tbody>
      {% for r in rest %}
        <tr><td><a href="{{ url_for('evidence', name=p.name, which=r.file, key=r.key) }}">{{ r.file }}.{{ r.key }}</a></td><td>{{ st_badge(r.chk.st) }}</td><td>{{ r.chk.summary }}</td></tr>
      {% endfor %}
      </tbody></table>
    </details>
    <form method="post" id="mf" class="stack">
      <div class="field"><label for="mby">확정자<span class="req">필수</span></label>
        <input id="mby" type="text" name="by" required style="max-width:20rem" disabled>
        <span class="help" id="hint">근거표를 끝까지 내리면 입력할 수 있습니다.</span></div>
      <div class="row end"><a class="btn" href="{{ url_for('pier', name=p.name) }}">취소</a>
        <button class="btn primary" id="mok" type="submit" disabled>일치 {{ targets|length }}개 확정</button></div>
    </form>
    <script>
    (function () {
      var sc = document.getElementById('sc'), by = document.getElementById('mby'), ok = document.getElementById('mok'), hint = document.getElementById('hint'), sent = false;
      function done() {
        if (sent) return; sent = true;
        fetch({{ url_for('confirm_matched_read', name=p.name)|tojson }}, {method: 'POST'}).then(function () {
          by.disabled = false; ok.disabled = false; hint.textContent = '근거표를 끝까지 읽었습니다. 이름을 입력하고 확정하세요.'; by.focus();
        });
      }
      function chk() { if (sc.scrollTop + sc.clientHeight >= sc.scrollHeight - 2) done(); }
      sc.addEventListener('scroll', chk); chk();
    })();
    </script>
    {% else %}
    <section class="strip"><p class="concl">확정할 일치 묶음이 없습니다.</p>
      <p class="cap">모든 일치 묶음이 확정되었거나, 앱 확인이 아직 '일치'인 묶음이 없습니다. 주의·불일치·근거 없음 묶음은 근거 보기에서 사유와 함께 하나씩 확정합니다.</p></section>
    {% if rest %}<div class="tw"><table class="t"><thead><tr><th scope="col">묶음</th><th scope="col">앱 확인</th><th scope="col">사유</th></tr></thead><tbody>
      {% for r in rest %}<tr><td><a href="{{ url_for('evidence', name=p.name, which=r.file, key=r.key) }}">{{ r.file }}.{{ r.key }}</a></td><td>{{ st_badge(r.chk.st) }}</td><td>{{ r.chk.summary }}</td></tr>{% endfor %}
    </tbody></table></div>{% endif %}
    <div class="row"><a class="btn" href="{{ url_for('pier', name=p.name) }}">묶음 표로 돌아가기</a></div>
    {% endif %}
  </div>
</div>
{% endblock %}