9998d9df96
- 헤더를 fixed로 변경하고 z-index를 200으로 높여 사이드바와 겹침 방지 - 대시보드에서 빠른 작업 섹션 제거 (사이드바로 대체) - 모든 템플릿(4개)에 사이드바 네비게이션 추가 - 템플릿 README에 사이드바 설명 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
129 lines
6.1 KiB
HTML
129 lines
6.1 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/modern-dashboard.css?v=2">
|
|
<link rel="icon" type="image/png" href="/img/favicon.png">
|
|
|
|
<!-- 스크립트 (순서 중요: api-config.js가 먼저 로드되어야 함) -->
|
|
<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 type="module" src="/js/load-sidebar.js"></script>
|
|
<script type="module" src="/js/modern-dashboard.js?v=10" defer></script>
|
|
<script type="module" src="/js/group-leader-dashboard.js?v=1" defer></script>
|
|
<script src="/js/workplace-status.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 메인 컨테이너 -->
|
|
<div class="dashboard-container">
|
|
|
|
<!-- 네비게이션 헤더 -->
|
|
<div id="navbar-container"></div>
|
|
|
|
<!-- 메인 콘텐츠 -->
|
|
<main class="dashboard-main">
|
|
|
|
<!-- 작업장 현황 -->
|
|
<section class="workplace-status-section">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="card-title">작업장 현황</h2>
|
|
<div class="flex items-center" style="gap: 12px;">
|
|
<select id="categorySelect" class="form-select" style="width: 200px;">
|
|
<option value="">공장을 선택하세요</option>
|
|
</select>
|
|
<button class="btn btn-primary btn-sm" id="refreshMapBtn">
|
|
새로고침
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- 지도 영역 -->
|
|
<div id="workplaceMapContainer" style="position: relative; min-height: 500px; display: none;">
|
|
<canvas id="workplaceMapCanvas" style="width: 100%; max-width: 100%; cursor: pointer; border: 2px solid var(--gray-300); border-radius: var(--radius-md);"></canvas>
|
|
<div id="mapLegend" style="position: absolute; top: 16px; right: 16px; background: white; padding: 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-md);">
|
|
<h4 style="font-size: var(--text-sm); font-weight: 700; margin-bottom: 12px;">범례</h4>
|
|
<div style="display: flex; flex-direction: column; gap: 8px;">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<div style="width: 16px; height: 16px; background: rgba(59, 130, 246, 0.3); border: 2px solid rgb(59, 130, 246); border-radius: 4px;"></div>
|
|
<span style="font-size: var(--text-sm);">작업 중 (내부 작업자)</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<div style="width: 16px; height: 16px; background: rgba(168, 85, 247, 0.3); border: 2px solid rgb(168, 85, 247); border-radius: 4px;"></div>
|
|
<span style="font-size: var(--text-sm);">방문 예정 (외부 인원)</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<div style="width: 16px; height: 16px; background: rgba(34, 197, 94, 0.3); border: 2px solid rgb(34, 197, 94); border-radius: 4px;"></div>
|
|
<span style="font-size: var(--text-sm);">작업 + 방문</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 안내 메시지 -->
|
|
<div id="mapPlaceholder" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; color: var(--gray-500);">
|
|
<div style="font-size: 48px; margin-bottom: 16px;">🏭</div>
|
|
<h3 style="margin-bottom: 8px;">공장을 선택하세요</h3>
|
|
<p style="font-size: var(--text-sm);">위에서 공장을 선택하면 작업장 현황을 확인할 수 있습니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</main>
|
|
|
|
<!-- 푸터 -->
|
|
<footer class="dashboard-footer">
|
|
<div class="footer-content">
|
|
<p class="footer-text">
|
|
© 2025 (주)테크니컬코리아. 모든 권리 보유.
|
|
</p>
|
|
<div class="footer-links">
|
|
<a href="#" class="footer-link">도움말</a>
|
|
<a href="#" class="footer-link">문의하기</a>
|
|
<a href="#" class="footer-link">개인정보처리방침</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<!-- 알림 토스트 -->
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
<!-- 작업장 상세 정보 모달 -->
|
|
<div id="workplaceDetailModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center;">
|
|
<div style="background: white; border-radius: var(--radius-lg); padding: 32px; max-width: 800px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-2xl);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
|
|
<h2 id="modalWorkplaceName" style="margin: 0; font-size: var(--text-2xl); font-weight: 700;"></h2>
|
|
<button class="btn btn-secondary btn-sm" onclick="closeWorkplaceModal()">닫기</button>
|
|
</div>
|
|
|
|
<!-- 내부 작업자 -->
|
|
<div id="internalWorkersSection" style="margin-bottom: 24px;">
|
|
<h3 style="font-size: var(--text-lg); font-weight: 600; margin-bottom: 16px; color: var(--primary-600);">👷 내부 작업자</h3>
|
|
<div id="internalWorkersList"></div>
|
|
</div>
|
|
|
|
<!-- 외부 방문자 -->
|
|
<div id="externalVisitorsSection">
|
|
<h3 style="font-size: var(--text-lg); font-weight: 600; margin-bottom: 16px; color: var(--purple-600);">🚪 외부 방문자</h3>
|
|
<div id="externalVisitorsList"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |