116 lines
4.4 KiB
HTML
116 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>CargoRadar Control</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<header class="topbar">
|
|
<div>
|
|
<strong class="brand">CargoRadar</strong>
|
|
<span class="subtitle">Control</span>
|
|
</div>
|
|
<div class="toolbar">
|
|
<span id="connectionStatus" class="status-pill">연결 대기</span>
|
|
<button id="refreshButton" type="button">새로고침</button>
|
|
<button id="demoButton" type="button">샘플 위치</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="workspace">
|
|
<aside class="sidebar" aria-label="차량 목록">
|
|
<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 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 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>
|