move_detect/server/src/View/events.php

<?php
require __DIR__ . '/layout.php';
render_header('이벤트');
?>
<div class="console">
  <aside class="rail">
    <section class="rail-block">
      <div class="rail-head">
        <h2 class="rail-title">장치 · 카메라</h2>
        <button type="button" id="camera-reset" class="rail-reset" hidden>전체 보기</button>
      </div>
      <!-- The tree itself is NOT a live region: it is rebuilt on a 5s poll and would be re-read
           in full every time. This one-line summary carries the announcement instead. -->
      <p id="rail-summary" class="rail-sum" aria-live="polite">장치 상태 확인 중…</p>
      <div id="devices-root" class="device-tree" aria-label="장치·카메라 트리">불러오는 중…</div>
    </section>
    <section class="rail-block">
      <h2 class="rail-title">필터</h2>
      <div class="rail-filters">
        <label class="field">심각도
          <select id="severity-filter" aria-label="심각도 필터">
            <option value="">전체 심각도</option>
            <option value="critical">위급</option>
            <option value="high">높음</option>
            <option value="warning">경고</option>
            <option value="info">정보</option>
          </select>
        </label>
        <label class="field">유형
          <select id="type-filter" aria-label="이벤트 유형 필터">
            <option value="">전체 유형</option>
            <option value="fall">넘어짐</option>
            <option value="no_motion">넘어짐 후 미동 없음</option>
            <option value="immobility">장시간 부동</option>
            <option value="ghost">위험 상태 소실</option>
            <option value="zone_warning">경고구역 진입</option>
            <option value="zone_restricted">제한구역 침입</option>
            <option value="pinch">협착구역 침입</option>
            <option value="lone_worker">위험구역 단독 작업</option>
            <option value="overcapacity">정원 초과</option>
            <option value="overstay">체류 상한 초과</option>
            <option value="near_fall">넘어질 뻔함 (니어미스)</option>
            <option value="ergo_report">작업자세 부담 리포트</option>
            <option value="monitoring_degraded">감시 성능 저하</option>
            <option value="device_fault">장치 이상</option>
            <!-- 감시 자체의 건전성. 조사자가 "언제부터 저 카메라가 이상했나"만 따로 걸러
                 볼 수 있어야 한다. -->
            <option value="camera_moved">카메라 화각 변경</option>
            <option value="camera_obstructed">카메라 가림</option>
            <option value="low_light">조도 저하</option>
            <option value="unacked_escalation">미확인 경보 에스컬레이션</option>
            <!-- 모델 확보 후 활성화 (엣지는 아직 발화하지 않음). -->
            <option value="ppe_missing">보호구 미착용</option>
            <option value="proximity">중장비 근접</option>
            <option value="fire_smoke">화재·연기</option>
          </select>
        </label>
      </div>
    </section>
    <section class="rail-block">
      <h2 class="rail-title">날짜 조회</h2>
      <!-- 사고 조사 진입로: 특정 날짜를 직접 연다. 라이브 폴링은 그동안에도 계속 돌아
           KPI·경보가 멈추지 않는다 (app.js runDayQuery). -->
      <div class="rail-date">
        <label class="field" for="date-jump">날짜
          <input type="date" id="date-jump">
        </label>
        <button type="button" id="date-jump-go">조회</button>
      </div>
    </section>
    <section class="rail-block">
      <h2 class="rail-title">오탐율 · 30일</h2>
      <!-- Read-only report: the 오탐 tags end here, as numbers a human reads before re-tuning
           a camera — the tag never adjusts edge sensitivity on its own. -->
      <div id="fp-stats-root" class="fp-stats" aria-label="카메라별 오탐율">집계 중…</div>
    </section>
  </aside>
  <section class="stream">
    <header class="stream-head">
      <div class="stream-title">
        <h1>감지 스트림</h1>
        <span class="watch" id="watch-status" aria-live="polite">실시간 감시 중</span>
        <!-- 경보음은 미확인 위급이 있을 때만 나타난다. 끌 수 없는 반복음은 안전 콘솔이
             통째로 꺼지는 경로라, 세션 한정 음소거를 두되 새 위급이 오면 자동 해제된다. -->
        <button type="button" id="alarm-mute" class="mute-btn" aria-pressed="false" hidden>경보음 끄기</button>
        <span class="mute-state" id="alarm-mute-state" role="status" hidden></span>
      </div>
      <div class="kpi-wrap">
        <!-- 캡션은 JS가 실제 집계 구간으로 덮어쓴다 (app.js renderStatusCaption):
             이 스트립은 '최근 200건' 기준이라 아래 24시간 브리프와 기준이 다르다. -->
        <span class="kpi-cap" id="kpi-cap">미확인</span>
        <div id="events-status" class="kpi-strip" aria-label="미확인 이벤트 현황"></div>
      </div>
    </header>
    <!-- 뷰 모드: 정렬이 아니라 필터다. 전체=시간순 연대기, 미확인=그 위에 얹은 처리 큐.
         전환해도 행끼리의 상대 순서는 절대 바뀌지 않는다. -->
    <div class="stream-tools">
      <div class="view-modes" role="group" aria-label="스트림 보기 모드">
        <button type="button" class="mode-btn" data-view-mode="all" aria-pressed="true">전체 (시간순)</button>
        <button type="button" class="mode-btn" data-view-mode="unacked" aria-pressed="false">미확인만</button>
      </div>
      <!-- 백로그 처리용. 위급은 의도적으로 제외한다 — 넘어짐은 한 건씩 눈으로 봐야 한다. -->
      <button type="button" id="bulk-ack" class="bulk-btn" hidden></button>
      <span class="kbd-hint" aria-hidden="true"><kbd>J</kbd><kbd>K</kbd> 이동 · <kbd>A</kbd> 확인 · <kbd>Enter</kbd> 상세</span>
    </div>
    <!-- 스냅샷 저장 공간이 차면 이미지 기록이 조용히 실패한다 (이벤트는 계속 쌓인다).
         증거가 사라지고 있다는 사실을 대시보드가 먼저 말해야 한다. -->
    <div id="storage-warn" class="storage-warn" role="status" hidden></div>
    <!-- Catch-up line for the operator who just sat down: what the last 24h held while
         nobody was watching. Hidden until the numbers arrive (an empty banner is noise). -->
    <div id="day-brief" class="day-brief" hidden></div>
    <div id="events-root" class="event-list" aria-live="polite" aria-busy="true">
      <div class="stream-empty">감지 이벤트를 불러오는 중…</div>
    </div>
    <div class="list-more"><button type="button" id="load-more" hidden>더 보기</button></div>
  </section>
</div>
<script src="<?= view_url('/assets/device-scope.js') ?>"></script>
<script src="<?= view_url('/assets/device-tree.js') ?>"></script>
<script src="<?= view_url('/assets/app.js') ?>"></script>
<?php
render_footer();