feat: TBM 모바일 시스템 + 작업 분할/이동 + 권한 통합
TBM 시스템: - 4단계 워크플로우 (draft→세부편집→완료→작업보고) - 모바일 전용 TBM 페이지 (tbm-mobile.html) + 3단계 생성 위자드 - 작업자 작업 분할 (work_hours + split_seq) - 작업자 이동 보내기/빼오기 (tbm_transfers 테이블) - 생성 시 중복 배정 방지 (당일 배정 현황 조회) - 데스크탑 TBM 페이지 세부편집 기능 추가 작업보고서: - 모바일 전용 작업보고서 페이지 (report-create-mobile.html) - TBM에서 사전 등록된 work_hours 자동 반영 권한 시스템: - tkuser user_page_permissions 테이블과 system1 페이지 접근 연동 - pageAccessRoutes를 userRoutes보다 먼저 등록 (라우트 우선순위 수정) - TKUSER_DEFAULT_ACCESS 폴백 추가 (개인→부서→기본값 3단계) - 권한 캐시키 갱신 (userPageAccess_v2) 기타: - app-init.js 캐시 버스팅 (v=5) - iOS Safari touch-action: manipulation 적용 - KST 타임존 날짜 버그 수정 (toISOString UTC 이슈) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
@@ -11,7 +11,7 @@
|
||||
<link rel="stylesheet" href="/css/work-analysis.css?v=41">
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
<script src="/js/api-base.js"></script>
|
||||
<script src="/js/app-init.js?v=3" defer></script>
|
||||
<script src="/js/app-init.js?v=5" defer></script>
|
||||
<script src="https://instant.page/5.2.0" type="module"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
|
||||
</head>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<link rel="stylesheet" href="/css/project-management.css?v=3">
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
<script src="/js/api-base.js"></script>
|
||||
<script src="/js/app-init.js?v=3" defer></script>
|
||||
<script src="/js/app-init.js?v=5" defer></script>
|
||||
<script src="https://instant.page/5.2.0" type="module"></script>
|
||||
<style>
|
||||
/* 통계 카드 */
|
||||
|
||||
194
system1-factory/web/pages/work/report-create-mobile.html
Normal file
194
system1-factory/web/pages/work/report-create-mobile.html
Normal file
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>작업보고서 | (주)테크니컬코리아</title>
|
||||
<link rel="stylesheet" href="/css/design-system.css">
|
||||
<link rel="stylesheet" href="/css/daily-work-report-mobile.css?v=1">
|
||||
<link rel="stylesheet" href="/css/mobile.css?v=1">
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
<script src="/js/api-base.js"></script>
|
||||
<script src="/js/app-init.js?v=5" defer></script>
|
||||
<style>
|
||||
/* 데스크탑이면 리다이렉트 */
|
||||
@media (min-width: 769px) {
|
||||
body::before {
|
||||
content: 'redirect';
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// 데스크탑 접속 시 리다이렉트
|
||||
if (window.innerWidth > 768) {
|
||||
window.location.replace('/pages/work/report-create.html');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 네비게이션 바 (app-init에서 로드) -->
|
||||
<div id="navbar-container"></div>
|
||||
|
||||
<div class="m-container">
|
||||
<!-- Sticky 헤더 -->
|
||||
<div class="m-header">
|
||||
<h1 class="m-header-title">작업보고서</h1>
|
||||
<div class="m-header-action">
|
||||
<button class="m-btn-add" id="btnAddManual" onclick="MobileReport.addManualCard()" style="display:none;">+ 수동추가</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 탭바 -->
|
||||
<div class="m-tab-bar">
|
||||
<button class="m-tab-btn active" data-tab="tbm" onclick="MobileReport.switchTab('tbm')">
|
||||
TBM 작업 <span class="m-tab-count" id="tbmCount">0</span>
|
||||
</button>
|
||||
<button class="m-tab-btn" data-tab="manual" onclick="MobileReport.switchTab('manual')">
|
||||
수동 입력
|
||||
</button>
|
||||
<button class="m-tab-btn" data-tab="completed" onclick="MobileReport.switchTab('completed')">
|
||||
완료
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 메시지 -->
|
||||
<div class="m-message" id="mMessage"></div>
|
||||
|
||||
<!-- TBM 탭 -->
|
||||
<div class="m-tab-content active" id="tabTbm">
|
||||
<div id="tbmCardList">
|
||||
<div class="m-loading"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 수동 입력 탭 -->
|
||||
<div class="m-tab-content" id="tabManual">
|
||||
<div id="manualCardList">
|
||||
<div class="m-empty">
|
||||
<div class="m-empty-icon">📝</div>
|
||||
<div>수동으로 작업보고서를 추가하세요</div>
|
||||
<button class="m-btn-add" style="margin-top:0.75rem;" onclick="MobileReport.addManualCard()">+ 수동추가</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 완료 탭 -->
|
||||
<div class="m-tab-content" id="tabCompleted">
|
||||
<div class="m-completed-header">
|
||||
<input type="date" class="m-date-input" id="completedDate" onchange="MobileReport.loadCompletedReports()">
|
||||
</div>
|
||||
<div id="completedCardList">
|
||||
<div class="m-empty">
|
||||
<div class="m-empty-icon">📋</div>
|
||||
<div>날짜를 선택하세요</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 시간 선택 오버레이 -->
|
||||
<div class="m-time-overlay" id="mTimeOverlay" onclick="MobileReport.closeTimePicker()">
|
||||
<div class="m-time-popup" onclick="event.stopPropagation()">
|
||||
<div class="m-time-header">
|
||||
<h3 class="m-time-title" id="mTimeTitle">작업시간 선택</h3>
|
||||
<button class="m-time-close" onclick="MobileReport.closeTimePicker()">×</button>
|
||||
</div>
|
||||
<div class="m-quick-time-grid">
|
||||
<button class="m-time-btn" onclick="MobileReport.setTime(0.5)">30분</button>
|
||||
<button class="m-time-btn" onclick="MobileReport.setTime(1)">1시간</button>
|
||||
<button class="m-time-btn" onclick="MobileReport.setTime(2)">2시간</button>
|
||||
<button class="m-time-btn" onclick="MobileReport.setTime(4)">4시간</button>
|
||||
<button class="m-time-btn" onclick="MobileReport.setTime(8)">8시간</button>
|
||||
</div>
|
||||
<div class="m-time-adjust">
|
||||
<button class="m-time-adjust-btn" onclick="MobileReport.adjustTime(-0.5)">-</button>
|
||||
<span class="m-time-current" id="mTimeCurrent">0시간</span>
|
||||
<button class="m-time-adjust-btn" onclick="MobileReport.adjustTime(0.5)">+</button>
|
||||
</div>
|
||||
<button class="m-time-confirm" onclick="MobileReport.confirmTime()">확인</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 부적합 바텀시트 -->
|
||||
<div class="m-overlay" id="defectOverlay" onclick="MobileReport.hideDefectSheet()"></div>
|
||||
<div class="m-bottom-sheet" id="defectSheet">
|
||||
<div class="m-sheet-handle"></div>
|
||||
<div class="m-sheet-header">
|
||||
<h3 class="m-sheet-title">부적합 입력</h3>
|
||||
<button class="m-sheet-close" onclick="MobileReport.hideDefectSheet()">×</button>
|
||||
</div>
|
||||
<div class="m-sheet-body" id="defectSheetBody">
|
||||
<!-- 동적 렌더링 -->
|
||||
</div>
|
||||
<div class="m-sheet-footer">
|
||||
<button class="m-submit-btn primary" onclick="MobileReport.saveDefects()">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 작업장소 바텀시트 -->
|
||||
<div class="m-overlay" id="wpOverlay" onclick="MobileReport.hideWorkplaceSheet()"></div>
|
||||
<div class="m-bottom-sheet" id="wpSheet">
|
||||
<div class="m-sheet-handle"></div>
|
||||
<div class="m-sheet-header">
|
||||
<h3 class="m-sheet-title" id="wpSheetTitle">작업장소 선택</h3>
|
||||
<button class="m-sheet-close" onclick="MobileReport.hideWorkplaceSheet()">×</button>
|
||||
</div>
|
||||
<div class="m-sheet-body" id="wpSheetBody">
|
||||
<!-- 동적 렌더링 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 수정 바텀시트 -->
|
||||
<div class="m-overlay" id="editOverlay" onclick="MobileReport.hideEditSheet()"></div>
|
||||
<div class="m-bottom-sheet" id="editSheet">
|
||||
<div class="m-sheet-handle"></div>
|
||||
<div class="m-sheet-header">
|
||||
<h3 class="m-sheet-title">보고서 수정</h3>
|
||||
<button class="m-sheet-close" onclick="MobileReport.hideEditSheet()">×</button>
|
||||
</div>
|
||||
<div class="m-sheet-body m-edit-form" id="editSheetBody">
|
||||
<!-- 동적 렌더링 -->
|
||||
</div>
|
||||
<div class="m-sheet-footer">
|
||||
<button class="m-submit-btn primary" onclick="MobileReport.saveEditedReport()">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 결과 모달 -->
|
||||
<div class="m-result-overlay" id="mResultOverlay">
|
||||
<div class="m-result-box">
|
||||
<div class="m-result-icon" id="mResultIcon"></div>
|
||||
<div class="m-result-title" id="mResultTitle"></div>
|
||||
<div class="m-result-message" id="mResultMessage"></div>
|
||||
<div class="m-result-details" id="mResultDetails" style="display:none;"></div>
|
||||
<button class="m-result-close" onclick="MobileReport.closeResult()">확인</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 토스트 -->
|
||||
<div class="m-toast" id="mToast"></div>
|
||||
|
||||
<!-- 작업보고서 모듈 (재사용) -->
|
||||
<script src="/js/daily-work-report/state.js?v=1"></script>
|
||||
<script src="/js/daily-work-report/utils.js?v=1"></script>
|
||||
<script src="/js/daily-work-report/api.js?v=1"></script>
|
||||
|
||||
<!-- 모바일 전용 UI 로직 -->
|
||||
<script src="/js/daily-work-report-mobile.js?v=3"></script>
|
||||
|
||||
<!-- 모바일 하단 네비게이션 -->
|
||||
<div id="mobile-nav-container"></div>
|
||||
<script>
|
||||
if (window.innerWidth <= 768) {
|
||||
fetch('/components/mobile-nav.html')
|
||||
.then(r => r.text())
|
||||
.then(html => {
|
||||
document.getElementById('mobile-nav-container').innerHTML = html;
|
||||
const scripts = document.getElementById('mobile-nav-container').querySelectorAll('script');
|
||||
scripts.forEach(s => eval(s.textContent));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,9 +8,15 @@
|
||||
<link rel="stylesheet" href="/css/daily-work-report.css?v=12">
|
||||
<link rel="stylesheet" href="/css/mobile.css?v=1">
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
<!-- 모바일 자동 리다이렉트 -->
|
||||
<script>
|
||||
if (window.innerWidth <= 768) {
|
||||
window.location.replace('/pages/work/report-create-mobile.html');
|
||||
}
|
||||
</script>
|
||||
<!-- 최적화된 로딩 -->
|
||||
<script src="/js/api-base.js"></script>
|
||||
<script src="/js/app-init.js?v=3" defer></script>
|
||||
<script src="/js/app-init.js?v=5" defer></script>
|
||||
<script src="https://instant.page/5.2.0" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -169,7 +175,7 @@
|
||||
|
||||
<!-- 스크립트 -->
|
||||
<script src="/js/api-base.js"></script>
|
||||
<script src="/js/app-init.js?v=3" defer></script>
|
||||
<script src="/js/app-init.js?v=5" defer></script>
|
||||
<script src="https://instant.page/5.2.0" type="module"></script>
|
||||
|
||||
<!-- 작업보고서 모듈 (리팩토링된 구조) -->
|
||||
@@ -178,7 +184,7 @@
|
||||
<script src="/js/daily-work-report/api.js?v=1"></script>
|
||||
|
||||
<!-- 기존 UI 로직 (점진적 마이그레이션) -->
|
||||
<script type="module" src="/js/daily-work-report.js?v=29"></script>
|
||||
<script type="module" src="/js/daily-work-report.js?v=30"></script>
|
||||
|
||||
<!-- 모바일 하단 네비게이션 -->
|
||||
<div id="mobile-nav-container"></div>
|
||||
|
||||
823
system1-factory/web/pages/work/tbm-create.html
Normal file
823
system1-factory/web/pages/work/tbm-create.html
Normal file
@@ -0,0 +1,823 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>TBM 시작 | (주)테크니컬코리아</title>
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
<script src="/js/api-base.js"></script>
|
||||
<script src="/js/app-init.js?v=5" defer></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
|
||||
background: #f3f4f6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
body { max-width: 480px; margin: 0 auto; min-height: 100vh; }
|
||||
}
|
||||
|
||||
/* Fixed header */
|
||||
.wizard-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
height: 52px;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
.wizard-header { max-width: 480px; margin: 0 auto; }
|
||||
}
|
||||
.wizard-header .back-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
background: rgba(255,255,255,0.15);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wizard-header .back-btn:active { background: rgba(255,255,255,0.25); }
|
||||
.wizard-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Step indicator */
|
||||
.step-indicator {
|
||||
position: sticky;
|
||||
top: 52px;
|
||||
z-index: 90;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.625rem 0.5rem;
|
||||
gap: 0;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.125rem;
|
||||
font-size: 0.5625rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.step .step-dot {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
background: #e5e7eb;
|
||||
color: #9ca3af;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.step.active .step-dot { background: #2563eb; color: white; }
|
||||
.step.active { color: #2563eb; font-weight: 600; }
|
||||
.step.completed .step-dot { background: #10b981; color: white; }
|
||||
.step.completed { color: #10b981; }
|
||||
.step-line {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: #e5e7eb;
|
||||
margin: 0 0.0625rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.step.completed + .step-line { background: #10b981; }
|
||||
|
||||
/* Step content area */
|
||||
.step-content {
|
||||
padding: 52px 0 76px 0; /* header + bottom nav */
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.wizard-section {
|
||||
margin: 0.75rem;
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
.section-title {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.section-title .sn {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Info row */
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-label {
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
width: 70px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info-value {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Worker grid */
|
||||
.worker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.worker-card {
|
||||
padding: 0.75rem;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: all 0.12s;
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.worker-card:active { transform: scale(0.97); }
|
||||
.worker-card.selected {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
}
|
||||
.worker-card .worker-check {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
border: 2px solid #d1d5db;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
color: transparent;
|
||||
}
|
||||
.worker-card.selected .worker-check {
|
||||
border-color: #2563eb;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
}
|
||||
.worker-card .worker-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.worker-card .worker-name {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.worker-card .worker-type {
|
||||
font-size: 0.6875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
.select-all-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 0;
|
||||
margin-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
.select-all-bar .count {
|
||||
font-size: 0.8125rem;
|
||||
color: #2563eb;
|
||||
font-weight: 600;
|
||||
}
|
||||
.select-all-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
background: white;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.select-all-btn:active { background: #f3f4f6; }
|
||||
|
||||
/* Project / list items */
|
||||
.list-item {
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1.5px solid #e5e7eb;
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.list-item:active { transform: scale(0.98); }
|
||||
.list-item.selected {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
}
|
||||
.list-item .item-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
.list-item .item-desc {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
.list-item-skip {
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1.5px dashed #d1d5db;
|
||||
border-radius: 0.75rem;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.5rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.list-item-skip:active { background: #f9fafb; }
|
||||
.list-item-skip.selected {
|
||||
border-color: #6b7280;
|
||||
border-style: solid;
|
||||
background: #f9fafb;
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Pill buttons */
|
||||
.pill-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.pill-btn {
|
||||
padding: 0.5rem 0.875rem;
|
||||
border: 1.5px solid #d1d5db;
|
||||
border-radius: 2rem;
|
||||
background: white;
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pill-btn:active { transform: scale(0.97); }
|
||||
.pill-btn.selected {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
font-weight: 600;
|
||||
}
|
||||
.sub-section {
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.875rem;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
.sub-section-title {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Map button */
|
||||
.map-open-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
background: linear-gradient(135deg, #0d9488, #0f766e);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.75rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.map-open-btn:active { opacity: 0.85; transform: scale(0.98); }
|
||||
.map-open-icon { font-size: 1.5rem; flex-shrink: 0; }
|
||||
.map-open-text { font-size: 0.9375rem; font-weight: 700; flex: 1; text-align: left; }
|
||||
.map-open-arrow { font-size: 1.125rem; opacity: 0.7; flex-shrink: 0; }
|
||||
|
||||
.location-info {
|
||||
padding: 0.75rem;
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: #166534;
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.location-info.empty {
|
||||
background: #f9fafb;
|
||||
border-color: #e5e7eb;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Summary card (Step 6) */
|
||||
.summary-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
background: #f9fafb;
|
||||
}
|
||||
.summary-row {
|
||||
display: flex;
|
||||
padding: 0.375rem 0;
|
||||
}
|
||||
.summary-label {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
width: 70px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.summary-value {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Worker accordion (Step 6) */
|
||||
.worker-accordion {
|
||||
border: 1.5px solid #e5e7eb;
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.worker-accordion.overridden {
|
||||
border-color: #f97316;
|
||||
}
|
||||
.worker-accordion-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
background: #f9fafb;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
.worker-accordion-header:active { background: #f3f4f6; }
|
||||
.worker-accordion .acc-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.worker-accordion .acc-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
.worker-accordion .acc-badge {
|
||||
font-size: 0.625rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.badge-default {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
.badge-override {
|
||||
background: #ffedd5;
|
||||
color: #c2410c;
|
||||
}
|
||||
.worker-accordion .acc-arrow {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.worker-accordion.open .acc-arrow { transform: rotate(180deg); }
|
||||
.worker-accordion-body {
|
||||
display: none;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
.worker-accordion.open .worker-accordion-body { display: block; }
|
||||
.override-row {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.override-label {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.override-select {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
background: white;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.override-select:focus {
|
||||
outline: none;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
|
||||
}
|
||||
.reset-btn {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px dashed #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
background: white;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
margin-top: 0.25rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.reset-btn:active { background: #f3f4f6; }
|
||||
|
||||
/* Empty state */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Fixed bottom nav */
|
||||
.wizard-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
height: 68px;
|
||||
background: white;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
.wizard-nav { max-width: 480px; margin: 0 auto; }
|
||||
}
|
||||
.nav-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.nav-btn:active { transform: scale(0.97); }
|
||||
.nav-btn-prev {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
.nav-btn-next {
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
}
|
||||
.nav-btn-next:disabled {
|
||||
background: #d1d5db;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.nav-btn-next:not(:disabled):active { background: #1d4ed8; }
|
||||
.nav-btn-save {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
.nav-btn-save:disabled {
|
||||
background: #d1d5db;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.nav-btn-save:not(:disabled):active { background: #059669; }
|
||||
|
||||
/* Landscape map overlay */
|
||||
.landscape-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.landscape-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #111;
|
||||
overflow: hidden;
|
||||
}
|
||||
.landscape-inner.rotated {
|
||||
width: 100vh;
|
||||
height: 100vw;
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.landscape-inner.no-rotate {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.landscape-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1rem;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
min-height: 44px;
|
||||
}
|
||||
.landscape-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.landscape-header .ls-selected {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 400;
|
||||
opacity: 0.9;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.landscape-close-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.landscape-canvas-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: #111;
|
||||
padding: 8px;
|
||||
}
|
||||
.landscape-canvas-wrap canvas {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* Loading overlay */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(255,255,255,0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #e5e7eb;
|
||||
border-top-color: #2563eb;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.loading-text {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes slideIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideOut {
|
||||
from { opacity: 1; transform: translateY(0); }
|
||||
to { opacity: 0; transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
/* Bulk edit */
|
||||
.bulk-bar { display:flex; align-items:center; justify-content:space-between; padding:0.625rem 0; border-bottom:1px solid #f3f4f6; margin-bottom:0.5rem; }
|
||||
.bulk-bar .bulk-left { display:flex; align-items:center; gap:0.5rem; }
|
||||
.bulk-bar .bulk-count { font-size:0.8125rem; color:#2563eb; font-weight:600; }
|
||||
.bulk-edit-btn { padding:0.375rem 0.75rem; background:#2563eb; color:#fff; border:none; border-radius:0.5rem; font-size:0.75rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; }
|
||||
.bulk-edit-btn:disabled { background:#d1d5db; cursor:not-allowed; }
|
||||
.bulk-edit-btn:not(:disabled):active { background:#1d4ed8; }
|
||||
.bulk-form { background:#f0f9ff; border:1.5px solid #93c5fd; border-radius:0.75rem; padding:1rem; margin-bottom:0.75rem; }
|
||||
.bulk-form .override-row { margin-bottom:0.75rem; }
|
||||
.bulk-form .bulk-apply-btn { width:100%; padding:0.625rem; background:#2563eb; color:#fff; border:none; border-radius:0.5rem; font-size:0.875rem; font-weight:700; margin-top:0.5rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
|
||||
.bulk-form .bulk-apply-btn:active { background:#1d4ed8; }
|
||||
.bulk-form .bulk-cancel-btn { width:100%; padding:0.5rem; background:none; border:1px solid #d1d5db; border-radius:0.5rem; font-size:0.75rem; color:#6b7280; margin-top:0.375rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
|
||||
.bulk-form .bulk-cancel-btn:active { background:#f3f4f6; }
|
||||
.acc-check { width:20px; height:20px; accent-color:#2563eb; flex-shrink:0; margin:0; }
|
||||
|
||||
/* Inline add: dashed pill for "+" */
|
||||
.pill-btn-add {
|
||||
padding: 0.5rem 0.875rem;
|
||||
border: 1.5px dashed #93c5fd;
|
||||
border-radius: 2rem;
|
||||
background: white;
|
||||
font-size: 0.8125rem;
|
||||
color: #2563eb;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
white-space: nowrap;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.pill-btn-add:active { background: #eff6ff; transform: scale(0.97); }
|
||||
|
||||
/* Inline add: dashed list-item for new task */
|
||||
.list-item-add {
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1.5px dashed #93c5fd;
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
color: #2563eb;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.list-item-add:active { background: #eff6ff; transform: scale(0.98); }
|
||||
|
||||
/* Inline add form */
|
||||
.inline-add-form {
|
||||
background: #f0f9ff;
|
||||
border: 1.5px solid #93c5fd;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
animation: fadeSlideIn 150ms ease-out;
|
||||
}
|
||||
.inline-add-form input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
background: white;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.inline-add-form input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
|
||||
}
|
||||
.inline-add-form .inline-add-btns {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.inline-add-form .inline-add-btns button {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.inline-add-form .btn-cancel {
|
||||
background: white;
|
||||
border: 1px solid #d1d5db;
|
||||
color: #6b7280;
|
||||
}
|
||||
.inline-add-form .btn-cancel:active { background: #f3f4f6; }
|
||||
.inline-add-form .btn-save {
|
||||
background: #2563eb;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
.inline-add-form .btn-save:active { background: #1d4ed8; }
|
||||
.inline-add-form .btn-save:disabled {
|
||||
background: #93c5fd;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@keyframes fadeSlideIn {
|
||||
from { opacity: 0; transform: translateY(-6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Fixed Header -->
|
||||
<div class="wizard-header">
|
||||
<button type="button" class="back-btn" onclick="goBack()">←</button>
|
||||
<h1>TBM 시작</h1>
|
||||
</div>
|
||||
|
||||
<!-- Step Indicator -->
|
||||
<div class="step-indicator" id="stepIndicator">
|
||||
<div class="step active"><span class="step-dot">1</span><span>작업자</span></div>
|
||||
<div class="step-line"></div>
|
||||
<div class="step"><span class="step-dot">2</span><span>프로젝트+공정</span></div>
|
||||
<div class="step-line"></div>
|
||||
<div class="step"><span class="step-dot">3</span><span>확인</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Step Content -->
|
||||
<div class="step-content" id="stepContainer">
|
||||
<!-- Dynamically rendered by tbm-create.js -->
|
||||
</div>
|
||||
|
||||
<!-- Fixed Bottom Nav -->
|
||||
<div class="wizard-nav" id="wizardNav">
|
||||
<button type="button" class="nav-btn nav-btn-prev" id="prevBtn" onclick="prevStep()" style="visibility:hidden;">← 이전</button>
|
||||
<button type="button" class="nav-btn nav-btn-next" id="nextBtn" onclick="nextStep()">다음 →</button>
|
||||
</div>
|
||||
|
||||
<!-- Landscape Map Overlay removed - workplace selection moved to detail edit stage -->
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<div id="loadingOverlay" class="loading-overlay">
|
||||
<div class="loading-spinner"></div>
|
||||
<div class="loading-text">데이터를 불러오는 중...</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast Container -->
|
||||
<div id="toastContainer" class="toast-container"></div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/js/tbm/state.js"></script>
|
||||
<script src="/js/tbm/utils.js"></script>
|
||||
<script src="/js/tbm/api.js"></script>
|
||||
<script src="/js/tbm-create.js?v=12"></script>
|
||||
</body>
|
||||
</html>
|
||||
2212
system1-factory/web/pages/work/tbm-mobile.html
Normal file
2212
system1-factory/web/pages/work/tbm-mobile.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -11,7 +11,7 @@
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
<!-- 최적화된 로딩: API 설정 → 앱 초기화 (병렬 컴포넌트 로딩) -->
|
||||
<script src="/js/api-base.js"></script>
|
||||
<script src="/js/app-init.js?v=3" defer></script>
|
||||
<script src="/js/app-init.js?v=5" defer></script>
|
||||
<!-- instant.page: 링크 호버 시 페이지 프리로딩 -->
|
||||
<script src="https://instant.page/5.2.0" type="module"></script>
|
||||
</head>
|
||||
@@ -144,9 +144,9 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- TBM 생성/수정 모달 -->
|
||||
<!-- TBM 생성 모달 (간소화) -->
|
||||
<div id="tbmModal" class="tbm-modal-overlay" style="display: none;">
|
||||
<div class="tbm-modal" style="max-width: 1000px;">
|
||||
<div class="tbm-modal" style="max-width: 800px;">
|
||||
<div class="tbm-modal-header">
|
||||
<h2 class="tbm-modal-title" id="modalTitle">
|
||||
<span>📝</span>
|
||||
@@ -159,7 +159,7 @@
|
||||
<form id="tbmForm" onsubmit="event.preventDefault(); saveTbmSession();">
|
||||
<input type="hidden" id="sessionId">
|
||||
|
||||
<!-- 고정 정보 섹션 -->
|
||||
<!-- 기본 정보 섹션 -->
|
||||
<div class="tbm-form-section">
|
||||
<h3 class="tbm-form-section-title">
|
||||
<span>📅</span>
|
||||
@@ -177,32 +177,44 @@
|
||||
<input type="hidden" id="leaderId">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbm-form-row">
|
||||
<div class="tbm-form-group">
|
||||
<label class="tbm-form-label">프로젝트</label>
|
||||
<select id="newTbmProjectId" class="tbm-form-input">
|
||||
<option value="">선택 안함</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="tbm-form-group">
|
||||
<label class="tbm-form-label">공정<span class="tbm-form-required">*</span></label>
|
||||
<select id="newTbmWorkTypeId" class="tbm-form-input" required>
|
||||
<option value="">공정 선택...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 작업자 및 작업 정보 섹션 -->
|
||||
<!-- 작업자 선택 섹션 -->
|
||||
<div class="tbm-form-section">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
||||
<h3 class="tbm-form-section-title" style="margin: 0; border: 0; padding: 0;">
|
||||
<span>👥</span>
|
||||
작업자 및 작업 정보
|
||||
작업자 선택
|
||||
<span id="newTbmWorkerCount" style="color: #3b82f6; font-size: 0.875rem;">(0명)</span>
|
||||
</h3>
|
||||
<div style="display: flex; gap: 0.5rem;">
|
||||
<button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm" onclick="openBulkSettingModal()">
|
||||
일괄 설정
|
||||
</button>
|
||||
<button type="button" class="tbm-btn tbm-btn-primary tbm-btn-sm" onclick="openWorkerSelectionModal()">
|
||||
<span class="tbm-btn-icon">+</span>
|
||||
작업자 선택
|
||||
</button>
|
||||
<button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm" onclick="selectAllNewTbmWorkers()">전체 선택</button>
|
||||
<button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm" onclick="deselectAllNewTbmWorkers()">전체 해제</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 작업자 카드 리스트 -->
|
||||
<div id="workerTaskList" class="tbm-worker-list">
|
||||
<!-- 작업자 카드들이 여기에 동적으로 추가됩니다 -->
|
||||
<div class="tbm-empty-state" id="workerListEmpty" style="padding: 2rem; border: 2px dashed #d1d5db; border-radius: 10px;">
|
||||
<div class="tbm-empty-icon">👥</div>
|
||||
<p class="tbm-empty-description" style="margin: 0;">작업자를 선택해주세요</p>
|
||||
<div id="newTbmWorkerGrid" class="tbm-worker-select-grid">
|
||||
<!-- 작업자 체크박스 그리드가 여기에 동적으로 생성됩니다 -->
|
||||
</div>
|
||||
|
||||
<div class="tbm-alert tbm-alert-info" style="margin-top: 1rem;">
|
||||
<span class="tbm-alert-icon">💡</span>
|
||||
<div class="tbm-alert-content">
|
||||
<div class="tbm-alert-text">저장 후 카드를 클릭하면 작업자별 <strong>작업/작업장</strong>을 입력할 수 있습니다.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -400,6 +412,9 @@
|
||||
<div class="tbm-workplace-map-container">
|
||||
<canvas id="workplaceMapCanvas"></canvas>
|
||||
</div>
|
||||
<button type="button" class="landscape-trigger-btn" id="landscapeTriggerBtn" onclick="openLandscapeMap()" style="display:none;">
|
||||
📺 전체화면 지도
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 리스트 기반 선택 (모바일에서 토글) -->
|
||||
@@ -525,11 +540,18 @@
|
||||
<label class="tbm-form-label">종료 시간</label>
|
||||
<input type="time" id="endTime" class="tbm-form-input">
|
||||
</div>
|
||||
|
||||
<div class="tbm-form-group" style="margin-top: 1rem;">
|
||||
<label class="tbm-form-label">작업자 근태</label>
|
||||
<div id="completeAttendanceList" style="max-height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.5rem;">
|
||||
<div style="text-align:center; color:#9ca3af; padding:1rem;">로딩 중...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tbm-modal-footer">
|
||||
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeCompleteModal()">취소</button>
|
||||
<button type="button" class="tbm-btn tbm-btn-success" onclick="completeTbmSession()">
|
||||
<button type="button" class="tbm-btn tbm-btn-success" id="completeModalBtn" onclick="completeTbmSession()">
|
||||
<span class="tbm-btn-icon">✓</span>
|
||||
완료
|
||||
</button>
|
||||
@@ -657,6 +679,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 가로모드 전체화면 지도 오버레이 -->
|
||||
<div id="landscapeOverlay" class="landscape-overlay" style="display:none;">
|
||||
<div id="landscapeInner" class="landscape-inner">
|
||||
<div class="landscape-header">
|
||||
<h3>🏭 작업장 선택</h3>
|
||||
<button type="button" class="landscape-close-btn" onclick="closeLandscapeMap()">×</button>
|
||||
</div>
|
||||
<div class="landscape-canvas-wrap">
|
||||
<canvas id="landscapeCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 토스트 알림 -->
|
||||
<div class="toast-container" id="toastContainer"></div>
|
||||
</div>
|
||||
@@ -667,7 +702,7 @@
|
||||
<script src="/js/tbm/api.js?v=1"></script>
|
||||
|
||||
<!-- 기존 UI 로직 (점진적 마이그레이션) -->
|
||||
<script type="module" src="/js/tbm.js?v=8"></script>
|
||||
<script type="module" src="/js/tbm.js?v=10"></script>
|
||||
|
||||
<!-- 모바일 하단 네비게이션 -->
|
||||
<div id="mobile-nav-container"></div>
|
||||
|
||||
Reference in New Issue
Block a user