209 lines
9.0 KiB
HTML
209 lines
9.0 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>CargoRadar 관제</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<header class="topbar">
|
|
<div class="brand-lockup">
|
|
<span class="brand-mark" aria-hidden="true">CR</span>
|
|
<div>
|
|
<strong class="brand">CargoRadar</strong>
|
|
<span class="subtitle">실시간 화물 관제</span>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-context">
|
|
<span class="topbar-chip">관제 데스크</span>
|
|
<time id="systemClock" datetime="">--:--</time>
|
|
</div>
|
|
<div class="toolbar">
|
|
<span id="connectionStatus" class="status-pill">연결 대기</span>
|
|
<button id="refreshButton" class="toolbar-button" type="button">
|
|
<span class="button-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" role="img">
|
|
<path d="M20 12a8 8 0 1 1-2.34-5.66" />
|
|
<path d="M20 4v6h-6" />
|
|
</svg>
|
|
</span>
|
|
새로고침
|
|
</button>
|
|
<button id="demoButton" class="toolbar-button" type="button">
|
|
<span class="button-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" role="img">
|
|
<path d="M7 18h10" />
|
|
<path d="M6 14l2-5h8l2 5" />
|
|
<path d="M8 14h8" />
|
|
<path d="M9 18v-2" />
|
|
<path d="M15 18v-2" />
|
|
</svg>
|
|
</span>
|
|
테스트 전송
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="workspace">
|
|
<aside class="sidebar" aria-label="차량 목록">
|
|
<section class="ops-brief" aria-label="운영 브리핑">
|
|
<span class="section-eyebrow">운영 현황</span>
|
|
<strong id="opsHeadline">전국 운송 상태 확인 중</strong>
|
|
<p id="opsSubline">실시간 위치 수신을 기다리고 있습니다.</p>
|
|
<div class="ops-brief-grid">
|
|
<span>
|
|
<small>평균 남은 시간</small>
|
|
<strong id="averageEta">-</strong>
|
|
</span>
|
|
<span>
|
|
<small>화물 품목</small>
|
|
<strong id="cargoTypeCount">-</strong>
|
|
</span>
|
|
<span>
|
|
<small>경로 보유</small>
|
|
<strong id="routePreviewCount">-</strong>
|
|
</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="summary-grid" aria-label="운영 현황">
|
|
<div class="metric">
|
|
<span class="metric-label">전체</span>
|
|
<strong id="totalCount">0</strong>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">수신 중</span>
|
|
<strong id="activeCount">0</strong>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">주의</span>
|
|
<strong id="staleCount">0</strong>
|
|
</div>
|
|
</section>
|
|
|
|
<nav class="view-tabs" aria-label="관제 보기">
|
|
<button id="locationsTab" class="tab-button is-active" type="button">위치</button>
|
|
<button id="driversTab" class="tab-button" type="button">기사</button>
|
|
</nav>
|
|
|
|
<section id="locationsPanel" class="vehicle-panel">
|
|
<div class="panel-heading">
|
|
<h1>차량 위치</h1>
|
|
<span id="lastUpdated">수신 대기</span>
|
|
</div>
|
|
<div class="vehicle-controls">
|
|
<label class="search-field">
|
|
<span>검색</span>
|
|
<input id="vehicleSearchInput" type="search" placeholder="차량, 기사, 화물, 목적지" autocomplete="off" />
|
|
</label>
|
|
<div class="status-filters" aria-label="차량 상태 필터">
|
|
<button class="filter-button is-active" type="button" data-status-filter="all">전체</button>
|
|
<button class="filter-button" type="button" data-status-filter="active">수신 중</button>
|
|
<button class="filter-button" type="button" data-status-filter="stale">주의</button>
|
|
</div>
|
|
</div>
|
|
<div id="vehicleList" class="vehicle-list"></div>
|
|
</section>
|
|
|
|
<section id="driversPanel" class="vehicle-panel is-hidden">
|
|
<div class="panel-heading">
|
|
<h1>기사 관리</h1>
|
|
<span id="driverCount">0명</span>
|
|
</div>
|
|
|
|
<form id="driverForm" class="driver-form">
|
|
<label>
|
|
<span>기사명</span>
|
|
<input id="driverNameInput" name="name" required autocomplete="off" />
|
|
</label>
|
|
<label>
|
|
<span>차량번호</span>
|
|
<input id="vehicleNoInput" name="vehicleNo" required autocomplete="off" />
|
|
</label>
|
|
<label>
|
|
<span>차량 유형</span>
|
|
<select id="vehicleTypeInput" name="vehicleType">
|
|
<option value="cargo-truck">카고트럭</option>
|
|
<option value="tractor-trailer">트레일러</option>
|
|
<option value="box-truck">탑차</option>
|
|
<option value="van">용달차</option>
|
|
<option value="refrigerated">냉동탑차</option>
|
|
<option value="container">컨테이너</option>
|
|
<option value="wingbody">윙바디</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>전화번호</span>
|
|
<input id="phoneInput" name="phone" autocomplete="off" />
|
|
</label>
|
|
<label>
|
|
<span>기사 ID</span>
|
|
<input id="driverIdInput" name="driverId" autocomplete="off" />
|
|
</label>
|
|
<button type="submit">기사 등록</button>
|
|
</form>
|
|
|
|
<div id="driverList" class="driver-list"></div>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="map-panel" aria-label="지도">
|
|
<div id="map"></div>
|
|
<div id="mapMessage" class="map-message">지도 로딩 중</div>
|
|
<section class="map-status-panel" aria-label="지도 운영 상태">
|
|
<span class="section-eyebrow">운행 지도</span>
|
|
<strong id="mapStatusTitle">운행 현황</strong>
|
|
<div class="map-status-grid">
|
|
<span><b id="mapActiveCount">0</b> 수신 중</span>
|
|
<span><b id="mapEtaSummary">-</b> 평균 남은 시간</span>
|
|
<span><b id="mapUpdatedAt">-</b> 최근 수신</span>
|
|
</div>
|
|
</section>
|
|
<section id="routeFocusPanel" class="route-focus-panel" aria-live="polite">
|
|
<span class="section-eyebrow">차량 정보</span>
|
|
<strong id="routeFocusTitle">차량 선택</strong>
|
|
<p id="routeFocusMeta">차량을 선택하면 운행 경로와 도착 시간을 확인할 수 있습니다.</p>
|
|
</section>
|
|
<section id="markerActionPanel" class="marker-action-panel is-hidden" aria-label="차량 빠른 선택">
|
|
<div class="marker-action-head">
|
|
<div>
|
|
<span id="markerActionEyebrow" class="section-eyebrow">차량</span>
|
|
<strong id="markerActionTitle">-</strong>
|
|
<p id="markerActionMeta">-</p>
|
|
</div>
|
|
<button id="markerActionCloseButton" type="button" aria-label="선택 닫기">닫기</button>
|
|
</div>
|
|
<div id="markerActionSummary" class="marker-action-summary"></div>
|
|
<div class="marker-action-buttons">
|
|
<button type="button" data-marker-action="route">경로 보기</button>
|
|
<button type="button" data-marker-action="cargo">화물 확인</button>
|
|
<button type="button" data-marker-action="history">수신 이력</button>
|
|
<button type="button" data-marker-action="center">지도 중심</button>
|
|
</div>
|
|
</section>
|
|
<div class="map-legend" aria-label="지도 범례">
|
|
<span><i class="legend-dot active"></i>수신 중</span>
|
|
<span><i class="legend-dot stale"></i>주의</span>
|
|
<span><i class="legend-line"></i>목적지 경로</span>
|
|
</div>
|
|
<section id="historyDrawer" class="history-drawer is-hidden" aria-label="위치 이력">
|
|
<div class="history-heading">
|
|
<div>
|
|
<strong id="historyTitle">위치 이력</strong>
|
|
<span id="historySummary">-</span>
|
|
</div>
|
|
<button id="historyCloseButton" type="button">닫기</button>
|
|
</div>
|
|
<div id="historyList" class="history-list"></div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/config.js"></script>
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|