b6485e3140
- 실시간 작업장 현황을 지도로 시각화 - 작업장 관리 페이지에서 정의한 구역 정보 활용 - TBM 작업자 및 방문자 현황 표시 주요 변경사항: - dashboard.html: 작업장 현황 섹션 추가 (기존 작업 현황 테이블 제거) - workplace-status.js: 지도 렌더링 및 데이터 통합 로직 구현 - modern-dashboard.js: 삭제된 DOM 요소 조건부 체크 추가 시각화 방식: - 인원 없음: 회색 테두리 + 작업장 이름 - 내부 작업자: 파란색 영역 + 인원 수 - 외부 방문자: 보라색 영역 + 인원 수 - 둘 다: 초록색 영역 + 총 인원 수 기술 구현: - Canvas API 기반 사각형 영역 렌더링 - map-regions API를 통한 데이터 일관성 보장 - 클릭 이벤트로 상세 정보 모달 표시 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
144 lines
4.9 KiB
HTML
144 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>연간 연차 현황 | 테크니컬코리아</title>
|
|
|
|
<!-- 모던 디자인 시스템 적용 -->
|
|
<link rel="stylesheet" href="/css/design-system.css">
|
|
<link rel="stylesheet" href="/css/annual-vacation-overview.css">
|
|
<link rel="icon" type="image/png" href="/img/favicon.png">
|
|
|
|
<!-- 스크립트 -->
|
|
<script type="module" src="/js/api-config.js"></script>
|
|
<script type="module" src="/js/auth-check.js" defer></script>
|
|
<script type="module" src="/js/load-navbar.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>
|
|
<script type="module" src="/js/annual-vacation-overview.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 메인 컨테이너 -->
|
|
<div class="page-container">
|
|
|
|
<!-- 네비게이션 헤더 -->
|
|
<div id="navbar-container"></div>
|
|
|
|
<!-- 메인 콘텐츠 -->
|
|
<main class="main-content">
|
|
<div class="content-wrapper">
|
|
|
|
<!-- 페이지 헤더 -->
|
|
<div class="page-header">
|
|
<h1 class="page-title">📊 연간 연차 현황</h1>
|
|
<p class="page-description">모든 작업자의 연간 휴가 현황을 차트로 확인합니다</p>
|
|
</div>
|
|
|
|
<!-- 필터 섹션 -->
|
|
<section class="filter-section">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="filter-controls">
|
|
<div class="form-group">
|
|
<label for="yearSelect">조회 연도</label>
|
|
<select id="yearSelect" class="form-select">
|
|
<!-- JavaScript로 동적 생성 -->
|
|
</select>
|
|
</div>
|
|
<button id="refreshBtn" class="btn btn-primary">
|
|
조회
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 탭 네비게이션 -->
|
|
<section class="tabs-section">
|
|
<div class="tabs-nav">
|
|
<button class="tab-btn active" data-tab="annualUsage">연간 사용 기록</button>
|
|
<button class="tab-btn" data-tab="monthlyDetails">월별 상세 기록</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 탭 1: 연간 사용 기록 -->
|
|
<section id="annualUsageTab" class="tab-content active">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">월별 휴가 사용 현황</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="annualUsageChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 탭 2: 월별 상세 기록 -->
|
|
<section id="monthlyDetailsTab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">월별 상세 기록</h2>
|
|
<div class="month-controls">
|
|
<select id="monthSelect" class="form-select">
|
|
<option value="1">1월</option>
|
|
<option value="2">2월</option>
|
|
<option value="3">3월</option>
|
|
<option value="4">4월</option>
|
|
<option value="5">5월</option>
|
|
<option value="6">6월</option>
|
|
<option value="7">7월</option>
|
|
<option value="8">8월</option>
|
|
<option value="9">9월</option>
|
|
<option value="10">10월</option>
|
|
<option value="11">11월</option>
|
|
<option value="12">12월</option>
|
|
</select>
|
|
<button id="exportExcelBtn" class="btn btn-sm btn-secondary">
|
|
📥 엑셀 다운로드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>작업자명</th>
|
|
<th>휴가 유형</th>
|
|
<th>시작일</th>
|
|
<th>종료일</th>
|
|
<th>사용 일수</th>
|
|
<th>사유</th>
|
|
<th>상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="monthlyTableBody">
|
|
<tr>
|
|
<td colspan="7" class="loading-state">
|
|
<div class="spinner"></div>
|
|
<p>데이터를 불러오는 중...</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
<!-- 알림 토스트 -->
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
</body>
|
|
|
|
</html>
|