44e2fb2e44
- 사진 2장까지 업로드 지원 - 카메라 촬영 + 갤러리 선택 분리 - 이미지 압축 및 최적화 (ImageUtils) - iPhone .mpo 파일 JPEG 변환 지원 - 카테고리 변경: 치수불량 → 설계미스, 검사미스 추가 - KST 시간대 설정 - URL 해시 처리로 목록관리 페이지 이동 개선 - 로그인 OAuth2 form-data 형식 수정 - 업로드 속도 개선 및 프로그레스바 추가
370 lines
17 KiB
HTML
370 lines
17 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>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Custom Styles -->
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.input-field {
|
|
background: white;
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.input-field:focus {
|
|
outline: none;
|
|
border-color: #60a5fa;
|
|
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="glass-effect border-b border-gray-200 sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 py-3">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-xl font-semibold text-gray-800">
|
|
<i class="fas fa-clipboard-list mr-2"></i>작업보고서 시스템
|
|
</h1>
|
|
<div id="navContainer" class="flex items-center gap-4">
|
|
<a href="/daily-work.html" class="text-gray-600 hover:text-gray-800 transition-colors">
|
|
<i class="fas fa-calendar-day mr-1"></i>일일 공수
|
|
</a>
|
|
<a href="/index.html" class="text-gray-600 hover:text-gray-800 transition-colors">
|
|
<i class="fas fa-exclamation-triangle mr-1"></i>부적합 등록
|
|
</a>
|
|
<a href="/issue-view.html" class="text-blue-600 font-medium">
|
|
<i class="fas fa-search mr-1"></i>부적합 조회
|
|
</a>
|
|
<a href="/index.html#list" class="text-gray-600 hover:text-gray-800 transition-colors" style="display:none;" id="listBtn">
|
|
<i class="fas fa-list mr-1"></i>목록 관리
|
|
</a>
|
|
<a href="/index.html#summary" class="text-gray-600 hover:text-gray-800 transition-colors" style="display:none;" id="summaryBtn">
|
|
<i class="fas fa-chart-bar mr-1"></i>보고서
|
|
</a>
|
|
<a href="/admin.html" class="text-gray-600 hover:text-gray-800 transition-colors" style="display:none;" id="adminBtn">
|
|
<i class="fas fa-users-cog mr-1"></i>관리
|
|
</a>
|
|
<button onclick="AuthAPI.logout()" class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm">
|
|
<i class="fas fa-sign-out-alt mr-1"></i>로그아웃
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto px-4 py-8">
|
|
<!-- 날짜 선택 섹션 (간소화) -->
|
|
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
|
|
<div class="flex flex-wrap gap-3 items-center">
|
|
<h2 class="text-lg font-semibold text-gray-800">
|
|
<i class="fas fa-list-alt text-blue-500 mr-2"></i>부적합 사항 목록
|
|
</h2>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<button onclick="setDateRange('today')" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors text-sm">
|
|
오늘
|
|
</button>
|
|
<button onclick="setDateRange('week')" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors text-sm">
|
|
이번 주
|
|
</button>
|
|
<button onclick="setDateRange('month')" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors text-sm">
|
|
이번 달
|
|
</button>
|
|
<button onclick="setDateRange('all')" class="px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm">
|
|
전체
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 결과 섹션 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<div id="issueResults" class="space-y-3">
|
|
<!-- 결과가 여기에 표시됩니다 -->
|
|
<div class="text-gray-500 text-center py-8">
|
|
<i class="fas fa-spinner fa-spin text-3xl mb-3"></i>
|
|
<p>데이터를 불러오는 중...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/static/js/api.js?v=20250917"></script>
|
|
<script src="/static/js/date-utils.js?v=20250917"></script>
|
|
<script>
|
|
let currentUser = null;
|
|
let issues = [];
|
|
let currentRange = 'week'; // 기본값: 이번 주
|
|
|
|
// 페이지 로드 시
|
|
window.addEventListener('DOMContentLoaded', async () => {
|
|
const user = TokenManager.getUser();
|
|
if (!user) {
|
|
window.location.href = '/index.html';
|
|
return;
|
|
}
|
|
currentUser = user;
|
|
|
|
// 네비게이션 권한 체크
|
|
updateNavigation();
|
|
|
|
// 기본값: 이번 주 데이터 로드
|
|
setDateRange('week');
|
|
});
|
|
|
|
// 이미지 모달 표시
|
|
function showImageModal(imagePath) {
|
|
if (!imagePath) return;
|
|
|
|
// 모달 HTML 생성
|
|
const modal = document.createElement('div');
|
|
modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50';
|
|
modal.onclick = () => modal.remove();
|
|
|
|
modal.innerHTML = `
|
|
<div class="relative max-w-4xl max-h-[90vh]">
|
|
<img src="${imagePath}" class="max-w-full max-h-[90vh] object-contain rounded-lg">
|
|
<button
|
|
onclick="this.parentElement.parentElement.remove()"
|
|
class="absolute top-2 right-2 p-2 bg-red-500 text-white rounded-full hover:bg-red-600"
|
|
>
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
}
|
|
|
|
// 네비게이션 권한 업데이트
|
|
function updateNavigation() {
|
|
const listBtn = document.getElementById('listBtn');
|
|
const summaryBtn = document.getElementById('summaryBtn');
|
|
const adminBtn = document.getElementById('adminBtn');
|
|
|
|
if (currentUser.role === 'admin') {
|
|
// 관리자는 모든 메뉴 표시
|
|
listBtn.style.display = '';
|
|
summaryBtn.style.display = '';
|
|
adminBtn.style.display = '';
|
|
adminBtn.innerHTML = '<i class="fas fa-users-cog mr-1"></i>사용자 관리';
|
|
} else {
|
|
// 일반 사용자는 제한된 메뉴만 표시
|
|
listBtn.style.display = 'none';
|
|
summaryBtn.style.display = 'none';
|
|
adminBtn.style.display = '';
|
|
adminBtn.innerHTML = '<i class="fas fa-key mr-1"></i>비밀번호 변경';
|
|
}
|
|
}
|
|
|
|
// 날짜 범위 설정 및 자동 조회
|
|
async function setDateRange(range) {
|
|
currentRange = range;
|
|
|
|
// 버튼 스타일 업데이트
|
|
document.querySelectorAll('button[onclick^="setDateRange"]').forEach(btn => {
|
|
if (btn.textContent.includes('전체') && range === 'all') {
|
|
btn.className = 'px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm';
|
|
} else if (btn.textContent.includes('오늘') && range === 'today') {
|
|
btn.className = 'px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm';
|
|
} else if (btn.textContent.includes('이번 주') && range === 'week') {
|
|
btn.className = 'px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm';
|
|
} else if (btn.textContent.includes('이번 달') && range === 'month') {
|
|
btn.className = 'px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm';
|
|
} else {
|
|
btn.className = 'px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors text-sm';
|
|
}
|
|
});
|
|
|
|
await loadIssues(range);
|
|
}
|
|
|
|
// 부적합 사항 로드
|
|
async function loadIssues(range) {
|
|
const container = document.getElementById('issueResults');
|
|
container.innerHTML = `
|
|
<div class="text-gray-500 text-center py-8">
|
|
<i class="fas fa-spinner fa-spin text-3xl mb-3"></i>
|
|
<p>데이터를 불러오는 중...</p>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
// 모든 이슈 가져오기
|
|
const allIssues = await IssuesAPI.getAll();
|
|
|
|
// 날짜 필터링
|
|
const today = new Date();
|
|
today.setHours(23, 59, 59, 999);
|
|
let startDate = new Date();
|
|
|
|
switch(range) {
|
|
case 'today':
|
|
startDate = new Date();
|
|
startDate.setHours(0, 0, 0, 0);
|
|
break;
|
|
case 'week':
|
|
startDate.setDate(today.getDate() - 7);
|
|
startDate.setHours(0, 0, 0, 0);
|
|
break;
|
|
case 'month':
|
|
startDate.setMonth(today.getMonth() - 1);
|
|
startDate.setHours(0, 0, 0, 0);
|
|
break;
|
|
case 'all':
|
|
startDate = new Date(2020, 0, 1); // 충분히 과거 날짜
|
|
break;
|
|
}
|
|
|
|
// 필터링 및 정렬 (최신순)
|
|
issues = allIssues
|
|
.filter(issue => {
|
|
const issueDate = new Date(issue.report_date);
|
|
return issueDate >= startDate && issueDate <= today;
|
|
})
|
|
.sort((a, b) => new Date(b.report_date) - new Date(a.report_date));
|
|
|
|
// 결과 표시
|
|
displayResults();
|
|
|
|
} catch (error) {
|
|
console.error('조회 실패:', error);
|
|
container.innerHTML = `
|
|
<div class="text-red-500 text-center py-8">
|
|
<i class="fas fa-exclamation-circle text-3xl mb-3"></i>
|
|
<p>데이터를 불러오는데 실패했습니다.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// 결과 표시 (시간순 나열)
|
|
function displayResults() {
|
|
const container = document.getElementById('issueResults');
|
|
|
|
if (issues.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="text-gray-500 text-center py-8">
|
|
<i class="fas fa-inbox text-4xl mb-3"></i>
|
|
<p>등록된 부적합 사항이 없습니다.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const categoryNames = {
|
|
material_missing: '자재누락',
|
|
design_error: '설계미스',
|
|
incoming_defect: '입고자재 불량',
|
|
inspection_miss: '검사미스'
|
|
};
|
|
|
|
const categoryColors = {
|
|
material_missing: 'bg-yellow-100 text-yellow-700 border-yellow-300',
|
|
design_error: 'bg-blue-100 text-blue-700 border-blue-300',
|
|
incoming_defect: 'bg-red-100 text-red-700 border-red-300',
|
|
inspection_miss: 'bg-purple-100 text-purple-700 border-purple-300'
|
|
};
|
|
|
|
// 시간순으로 나열
|
|
container.innerHTML = issues.map(issue => {
|
|
const dateStr = DateUtils.formatKST(issue.report_date, true);
|
|
const relativeTime = DateUtils.getRelativeTime(issue.report_date);
|
|
|
|
return `
|
|
<div class="flex gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors border-l-4 ${categoryColors[issue.category].split(' ')[2] || 'border-gray-300'}">
|
|
<!-- 사진들 -->
|
|
<div class="flex gap-1 flex-shrink-0">
|
|
${issue.photo_path ?
|
|
`<img src="${issue.photo_path}" class="w-20 h-20 object-cover rounded shadow-sm cursor-pointer" onclick="showImageModal('${issue.photo_path}')">` : ''
|
|
}
|
|
${issue.photo_path2 ?
|
|
`<img src="${issue.photo_path2}" class="w-20 h-20 object-cover rounded shadow-sm cursor-pointer" onclick="showImageModal('${issue.photo_path2}')">` : ''
|
|
}
|
|
${!issue.photo_path && !issue.photo_path2 ?
|
|
`<div class="w-20 h-20 bg-gray-200 rounded flex items-center justify-center">
|
|
<i class="fas fa-image text-gray-400"></i>
|
|
</div>` : ''
|
|
}
|
|
</div>
|
|
|
|
<!-- 내용 -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-start justify-between mb-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="px-2 py-0.5 rounded text-xs font-medium ${categoryColors[issue.category].split(' ').slice(0, 2).join(' ')}">
|
|
${categoryNames[issue.category]}
|
|
</span>
|
|
${issue.work_hours ? `
|
|
<span class="text-xs text-green-600 font-medium">
|
|
✓ ${issue.work_hours}시간
|
|
</span>
|
|
` : ''}
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
${dateStr} (${relativeTime})
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-800 line-clamp-2">${issue.description}</p>
|
|
|
|
<div class="mt-1 text-xs text-gray-500">
|
|
<i class="fas fa-user mr-1"></i>
|
|
${issue.reporter.full_name || issue.reporter.username}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
// 상단에 요약 추가
|
|
const summary = `
|
|
<div class="mb-4 p-3 bg-blue-50 rounded-lg text-sm">
|
|
<span class="font-medium text-blue-900">총 ${issues.length}건</span>
|
|
<span class="text-blue-700 ml-3">
|
|
자재누락: ${issues.filter(i => i.category === 'material_missing').length}건 |
|
|
설계미스: ${issues.filter(i => i.category === 'design_error').length}건 |
|
|
입고자재 불량: ${issues.filter(i => i.category === 'incoming_defect').length}건 |
|
|
검사미스: ${issues.filter(i => i.category === 'inspection_miss').length}건
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
container.innerHTML = summary + container.innerHTML;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|