d9cdaf622e
🔄 Major UI Redesign: - ❌ 세로 카드 레이아웃 (가독성 저하) - ✅ 가로 테이블 레이아웃 (한눈에 정보 확인) 📊 Table Structure: - 11개 컬럼: No., 프로젝트, 부적합내용, 카테고리, 해결방안, 담당부서, 담당자, 예상완료일, 원인부서, 사진, 등록일 - 가로 스크롤 지원으로 모든 정보 표시 - 각 컬럼별 최적화된 너비 설정 🎯 UX Improvements: - 긴급 표시: 예상완료일 3일 이내 시 빨간 배지 - 텍스트 truncate: 긴 내용은 말줄임표로 처리 (hover시 전체 내용 표시) - 사진 아이콘: 클릭 시 모달로 확대 - 행 hover 효과: 마우스 오버 시 배경색 변경 📱 Responsive Features: - 가로 스크롤로 모바일에서도 모든 정보 확인 가능 - Sticky 헤더: 스크롤 시 헤더 고정 - 최소 너비 보장으로 정보 압축 방지 🎨 Visual Enhancements: - 깔끔한 테이블 디자인 - 적절한 패딩과 간격 - 일관된 색상 체계 - 부드러운 hover 애니메이션 Expected Result: ✅ 대폭 향상된 가독성 ✅ 한 화면에서 모든 정보 확인 ✅ 효율적인 공간 활용 ✅ 관리함과 일관된 UX
679 lines
30 KiB
HTML
679 lines
30 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>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
.fade-in { opacity: 0; animation: fadeIn 0.5s ease-in forwards; }
|
|
@keyframes fadeIn { to { opacity: 1; } }
|
|
|
|
.header-fade-in { opacity: 0; animation: headerFadeIn 0.6s ease-out forwards; }
|
|
@keyframes headerFadeIn { to { opacity: 1; transform: translateY(0); } from { transform: translateY(-10px); } }
|
|
|
|
.content-fade-in { opacity: 0; animation: contentFadeIn 0.7s ease-out 0.2s forwards; }
|
|
@keyframes contentFadeIn { to { opacity: 1; transform: translateY(0); } from { transform: translateY(20px); } }
|
|
|
|
/* 대시보드 카드 스타일 */
|
|
.dashboard-card {
|
|
transition: all 0.3s ease;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.dashboard-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* 이슈 테이블 스타일 (가로 테이블 레이아웃) */
|
|
.dashboard-table {
|
|
min-width: 1200px;
|
|
}
|
|
|
|
.dashboard-table th {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: #f9fafb;
|
|
z-index: 10;
|
|
}
|
|
|
|
.dashboard-table td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.dashboard-table tr:hover {
|
|
background-color: #f8fafc;
|
|
}
|
|
|
|
.truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dashboard-table .fas.fa-image:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.progress-bar {
|
|
background: linear-gradient(90deg, #10b981 0%, #059669 100%);
|
|
transition: width 0.8s ease;
|
|
}
|
|
|
|
/* 반응형 그리드 */
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<!-- 로딩 스크린 -->
|
|
<div id="loadingScreen" class="fixed inset-0 bg-white z-50 flex items-center justify-center">
|
|
<div class="text-center">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
|
<p class="text-gray-600">현황판을 불러오는 중...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 로그인 스크린 -->
|
|
<div id="loginScreen" class="hidden fixed inset-0 bg-gray-100 z-40 flex items-center justify-center">
|
|
<div class="bg-white p-8 rounded-xl shadow-lg max-w-md w-full mx-4">
|
|
<h2 class="text-2xl font-bold text-center mb-6 text-gray-800">로그인</h2>
|
|
<form id="loginForm">
|
|
<div class="mb-4">
|
|
<input type="text" id="username" placeholder="사용자명" required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div class="mb-6">
|
|
<input type="password" id="password" placeholder="비밀번호" required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors">
|
|
로그인
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 메인 콘텐츠 -->
|
|
<div id="mainContent" class="min-h-screen">
|
|
<!-- 공통 헤더 -->
|
|
<div id="commonHeader"></div>
|
|
|
|
<!-- 메인 콘텐츠 -->
|
|
<main class="container mx-auto px-4 py-8 content-fade-in" style="padding-top: 80px;">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900 flex items-center">
|
|
<i class="fas fa-chart-line text-blue-500 mr-3"></i>
|
|
부적합 현황판
|
|
</h1>
|
|
<p class="text-gray-600 mt-1">진행 중인 부적합 사항을 프로젝트별로 한눈에 확인하세요</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 전체 통계 대시보드 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<div class="dashboard-card text-white p-6 rounded-xl">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-blue-100 text-sm">전체 진행 중</p>
|
|
<p class="text-3xl font-bold" id="totalInProgress">0</p>
|
|
</div>
|
|
<i class="fas fa-tasks text-4xl text-blue-200"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-green-400 to-green-600 text-white p-6 rounded-xl dashboard-card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-green-100 text-sm">오늘 신규</p>
|
|
<p class="text-3xl font-bold" id="todayNew">0</p>
|
|
</div>
|
|
<i class="fas fa-plus-circle text-4xl text-green-200"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-yellow-400 to-orange-500 text-white p-6 rounded-xl dashboard-card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-yellow-100 text-sm">지연 위험</p>
|
|
<p class="text-3xl font-bold" id="delayRisk">0</p>
|
|
</div>
|
|
<i class="fas fa-exclamation-triangle text-4xl text-yellow-200"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-purple-400 to-purple-600 text-white p-6 rounded-xl dashboard-card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-purple-100 text-sm">활성 프로젝트</p>
|
|
<p class="text-3xl font-bold" id="activeProjects">0</p>
|
|
</div>
|
|
<i class="fas fa-project-diagram text-4xl text-purple-200"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 프로젝트 선택 및 필터 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
|
|
<div class="flex items-center space-x-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">프로젝트 선택</label>
|
|
<select id="projectFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-w-[200px]" onchange="filterByProject()">
|
|
<option value="">전체 프로젝트</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">정렬 기준</label>
|
|
<select id="sortOrder" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="sortIssues()">
|
|
<option value="priority">우선순위</option>
|
|
<option value="date">신고일순</option>
|
|
<option value="deadline">마감일순</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button onclick="refreshDashboard()" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
|
|
<i class="fas fa-sync-alt mr-2"></i>새로고침
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 프로젝트별 현황 -->
|
|
<div id="projectDashboard" class="space-y-6">
|
|
<!-- 동적으로 생성될 프로젝트 카드들 -->
|
|
</div>
|
|
|
|
<!-- 빈 상태 -->
|
|
<div id="emptyState" class="hidden text-center py-12">
|
|
<i class="fas fa-chart-line text-6xl text-gray-300 mb-4"></i>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">진행 중인 부적합이 없습니다</h3>
|
|
<p class="text-gray-500">새로운 부적합이 등록되면 여기에 표시됩니다.</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 스크립트 -->
|
|
<script src="/static/js/core/permissions.js?v=1.1"></script>
|
|
<script src="/static/js/components/common-header.js?v=1.1"></script>
|
|
<script src="/static/js/core/page-manager.js?v=1.1"></script>
|
|
<script src="/static/js/core/auth-manager.js?v=1.1"></script>
|
|
|
|
<script>
|
|
let currentUser = null;
|
|
let allIssues = [];
|
|
let projects = [];
|
|
let filteredIssues = [];
|
|
|
|
// 애니메이션 함수들
|
|
function animateHeaderAppearance() {
|
|
const header = document.getElementById('commonHeader');
|
|
if (header) {
|
|
header.classList.add('header-fade-in');
|
|
}
|
|
}
|
|
|
|
function animateContentAppearance() {
|
|
const content = document.querySelector('.content-fade-in');
|
|
if (content) {
|
|
content.classList.add('visible');
|
|
}
|
|
}
|
|
|
|
// 페이지 초기화
|
|
async function initializeDashboard() {
|
|
try {
|
|
// 인증 확인
|
|
currentUser = await window.authManager.checkAuth();
|
|
if (!currentUser) {
|
|
showLoginScreen();
|
|
return;
|
|
}
|
|
|
|
// 페이지 권한 확인
|
|
window.pagePermissionManager.setUser(currentUser);
|
|
await window.pagePermissionManager.loadPagePermissions();
|
|
|
|
if (!window.pagePermissionManager.canAccessPage('issues_dashboard')) {
|
|
alert('현황판 접근 권한이 없습니다.');
|
|
window.location.href = '/';
|
|
return;
|
|
}
|
|
|
|
// 공통 헤더 초기화
|
|
if (window.commonHeader) {
|
|
await window.commonHeader.init(currentUser, 'issues_dashboard');
|
|
setTimeout(() => animateHeaderAppearance(), 100);
|
|
}
|
|
|
|
// 데이터 로드
|
|
await Promise.all([
|
|
loadProjects(),
|
|
loadInProgressIssues()
|
|
]);
|
|
|
|
updateDashboard();
|
|
hideLoadingScreen();
|
|
|
|
} catch (error) {
|
|
console.error('대시보드 초기화 실패:', error);
|
|
alert('대시보드를 불러오는데 실패했습니다.');
|
|
hideLoadingScreen();
|
|
}
|
|
}
|
|
|
|
// 로딩 스크린 관리
|
|
function hideLoadingScreen() {
|
|
document.getElementById('loadingScreen').style.display = 'none';
|
|
}
|
|
|
|
function showLoginScreen() {
|
|
document.getElementById('loadingScreen').style.display = 'none';
|
|
document.getElementById('loginScreen').classList.remove('hidden');
|
|
}
|
|
|
|
// 데이터 로드 함수들
|
|
async function loadProjects() {
|
|
try {
|
|
const response = await fetch('/api/projects/', {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
projects = await response.json();
|
|
updateProjectFilter();
|
|
} else {
|
|
throw new Error('프로젝트 목록을 불러올 수 없습니다.');
|
|
}
|
|
} catch (error) {
|
|
console.error('프로젝트 로드 실패:', error);
|
|
}
|
|
}
|
|
|
|
async function loadInProgressIssues() {
|
|
try {
|
|
const response = await fetch('/api/issues/admin/all', {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const allData = await response.json();
|
|
// 진행 중 상태만 필터링
|
|
allIssues = allData.filter(issue => issue.review_status === 'in_progress');
|
|
filteredIssues = [...allIssues];
|
|
} else {
|
|
throw new Error('부적합 목록을 불러올 수 없습니다.');
|
|
}
|
|
} catch (error) {
|
|
console.error('부적합 로드 실패:', error);
|
|
}
|
|
}
|
|
|
|
// 프로젝트 필터 업데이트
|
|
function updateProjectFilter() {
|
|
const projectFilter = document.getElementById('projectFilter');
|
|
projectFilter.innerHTML = '<option value="">전체 프로젝트</option>';
|
|
|
|
projects.forEach(project => {
|
|
const option = document.createElement('option');
|
|
option.value = project.id;
|
|
option.textContent = project.project_name;
|
|
projectFilter.appendChild(option);
|
|
});
|
|
}
|
|
|
|
// 대시보드 업데이트
|
|
function updateDashboard() {
|
|
updateStatistics();
|
|
updateProjectCards();
|
|
}
|
|
|
|
// 통계 업데이트
|
|
function updateStatistics() {
|
|
const today = new Date().toDateString();
|
|
const todayIssues = allIssues.filter(issue =>
|
|
new Date(issue.report_date).toDateString() === today
|
|
);
|
|
|
|
// 지연 위험 계산 (예상일이 지났거나 3일 이내)
|
|
const delayRiskIssues = allIssues.filter(issue => {
|
|
if (!issue.expected_completion_date) return false;
|
|
const expectedDate = new Date(issue.expected_completion_date);
|
|
const now = new Date();
|
|
const diffDays = (expectedDate - now) / (1000 * 60 * 60 * 24);
|
|
return diffDays <= 3; // 3일 이내 또는 지연
|
|
});
|
|
|
|
// 활성 프로젝트 (진행 중인 부적합이 있는 프로젝트)
|
|
const activeProjectIds = new Set(allIssues.map(issue => issue.project_id));
|
|
|
|
document.getElementById('totalInProgress').textContent = allIssues.length;
|
|
document.getElementById('todayNew').textContent = todayIssues.length;
|
|
document.getElementById('delayRisk').textContent = delayRiskIssues.length;
|
|
document.getElementById('activeProjects').textContent = activeProjectIds.size;
|
|
}
|
|
|
|
// 이슈 테이블 업데이트 (가로 테이블 스타일)
|
|
function updateProjectCards() {
|
|
const container = document.getElementById('projectDashboard');
|
|
const emptyState = document.getElementById('emptyState');
|
|
|
|
if (filteredIssues.length === 0) {
|
|
container.innerHTML = '';
|
|
emptyState.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
emptyState.classList.add('hidden');
|
|
|
|
// 가로 스크롤 테이블 생성
|
|
const tableHTML = `
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 dashboard-table">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[80px]">No.</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[120px]">프로젝트</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[200px]">부적합 내용</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[80px]">카테고리</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[150px]">해결방안</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[100px]">담당부서</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[100px]">담당자</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[120px]">예상완료일</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[100px]">원인부서</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[80px]">사진</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[100px]">등록일</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
${filteredIssues.map(issue => createIssueRow(issue)).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
container.innerHTML = tableHTML;
|
|
}
|
|
|
|
// 이슈 테이블 행 생성 (가로 테이블 스타일, 읽기 전용)
|
|
function createIssueRow(issue) {
|
|
const project = projects.find(p => p.id === issue.project_id);
|
|
const projectName = project ? project.project_name : '미지정';
|
|
|
|
// 부서 텍스트 변환
|
|
const getDepartmentText = (dept) => {
|
|
const deptMap = {
|
|
'production': '생산',
|
|
'quality': '품질',
|
|
'purchasing': '구매',
|
|
'design': '설계',
|
|
'sales': '영업'
|
|
};
|
|
return dept ? deptMap[dept] || dept : '-';
|
|
};
|
|
|
|
// 카테고리 텍스트 변환
|
|
const getCategoryText = (category) => {
|
|
const categoryMap = {
|
|
'quality': '품질',
|
|
'safety': '안전',
|
|
'environment': '환경',
|
|
'process': '공정',
|
|
'equipment': '장비',
|
|
'material': '자재',
|
|
'etc': '기타'
|
|
};
|
|
return category ? categoryMap[category] || category : '-';
|
|
};
|
|
|
|
// 날짜 포맷팅
|
|
const formatKSTDate = (dateStr) => {
|
|
if (!dateStr) return '-';
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString('ko-KR', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit'
|
|
});
|
|
};
|
|
|
|
// 긴급도 체크 (예상완료일 기준)
|
|
const isUrgent = () => {
|
|
if (!issue.expected_completion_date) return false;
|
|
const expectedDate = new Date(issue.expected_completion_date);
|
|
const now = new Date();
|
|
const diffDays = (expectedDate - now) / (1000 * 60 * 60 * 24);
|
|
return diffDays <= 3; // 3일 이내 또는 지연
|
|
};
|
|
|
|
// 사진 아이콘 생성
|
|
const getPhotoIcons = () => {
|
|
const photos = [];
|
|
if (issue.photo_path) photos.push(issue.photo_path);
|
|
if (issue.photo_path2) photos.push(issue.photo_path2);
|
|
|
|
if (photos.length === 0) return '-';
|
|
|
|
return photos.map(photo =>
|
|
`<i class="fas fa-image text-blue-500 cursor-pointer hover:text-blue-700 mr-1"
|
|
onclick="openPhotoModal('${photo}')" title="사진 보기"></i>`
|
|
).join('');
|
|
};
|
|
|
|
// 긴급 표시가 있는 No. 생성
|
|
const getNoWithUrgent = () => {
|
|
const noText = issue.project_sequence_no || '-';
|
|
if (isUrgent()) {
|
|
return `<div class="flex items-center space-x-2">
|
|
<span class="font-medium text-blue-600">${noText}</span>
|
|
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">긴급</span>
|
|
</div>`;
|
|
}
|
|
return `<span class="font-medium text-blue-600">${noText}</span>`;
|
|
};
|
|
|
|
return `
|
|
<tr class="hover:bg-gray-50 transition-colors duration-150">
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm">${getNoWithUrgent()}</td>
|
|
<td class="px-4 py-4 text-sm text-gray-900">
|
|
<div class="max-w-[120px] truncate" title="${projectName}">${projectName}</div>
|
|
</td>
|
|
<td class="px-4 py-4 text-sm text-gray-900">
|
|
<div class="max-w-[200px] truncate" title="${issue.final_description || issue.description || '-'}">
|
|
${issue.final_description || issue.description || '-'}
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
${getCategoryText(issue.final_category || issue.category)}
|
|
</td>
|
|
<td class="px-4 py-4 text-sm text-gray-900">
|
|
<div class="max-w-[150px] truncate" title="${issue.solution || '-'}">
|
|
${issue.solution || '-'}
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
${getDepartmentText(issue.responsible_department)}
|
|
</td>
|
|
<td class="px-4 py-4 text-sm text-gray-900">
|
|
<div class="max-w-[100px] truncate" title="${issue.responsible_person || '-'}">
|
|
${issue.responsible_person || '-'}
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 ${isUrgent() ? 'text-red-600 font-medium' : ''}">
|
|
${formatKSTDate(issue.expected_completion_date)}
|
|
</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
${getDepartmentText(issue.cause_department)}
|
|
</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm">
|
|
${getPhotoIcons()}
|
|
</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
${formatKSTDate(issue.report_date)}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
// 사진 모달 열기
|
|
function openPhotoModal(photoPath) {
|
|
let modal = document.getElementById('photoModal');
|
|
|
|
if (!modal) {
|
|
// 모달이 없으면 생성
|
|
const modalHTML = `
|
|
<div id="photoModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="relative max-w-4xl max-h-full p-4">
|
|
<img id="modalPhoto" src="" alt="부적합 사진" class="max-w-full max-h-full object-contain rounded-lg">
|
|
<button onclick="closePhotoModal()" class="absolute top-4 right-4 text-white text-2xl hover:text-gray-300">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.insertAdjacentHTML('beforeend', modalHTML);
|
|
modal = document.getElementById('photoModal');
|
|
}
|
|
|
|
document.getElementById('modalPhoto').src = photoPath;
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
// 사진 모달 닫기
|
|
function closePhotoModal() {
|
|
const modal = document.getElementById('photoModal');
|
|
if (modal) {
|
|
modal.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// ESC 키로 모달 닫기
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closePhotoModal();
|
|
}
|
|
});
|
|
|
|
// 필터 및 정렬 함수들
|
|
function filterByProject() {
|
|
const projectId = document.getElementById('projectFilter').value;
|
|
|
|
if (projectId) {
|
|
filteredIssues = allIssues.filter(issue => issue.project_id == projectId);
|
|
} else {
|
|
filteredIssues = [...allIssues];
|
|
}
|
|
|
|
sortIssues();
|
|
updateProjectCards();
|
|
}
|
|
|
|
function sortIssues() {
|
|
const sortOrder = document.getElementById('sortOrder').value;
|
|
|
|
filteredIssues.sort((a, b) => {
|
|
switch (sortOrder) {
|
|
case 'priority':
|
|
// 긴급도 우선 (마감일이 가까운 순)
|
|
const aUrgent = a.expected_completion_date ?
|
|
(new Date(a.expected_completion_date) - new Date()) / (1000 * 60 * 60 * 24) : 999;
|
|
const bUrgent = b.expected_completion_date ?
|
|
(new Date(b.expected_completion_date) - new Date()) / (1000 * 60 * 60 * 24) : 999;
|
|
return aUrgent - bUrgent;
|
|
case 'date':
|
|
return new Date(b.report_date) - new Date(a.report_date);
|
|
case 'deadline':
|
|
if (!a.expected_completion_date && !b.expected_completion_date) return 0;
|
|
if (!a.expected_completion_date) return 1;
|
|
if (!b.expected_completion_date) return -1;
|
|
return new Date(a.expected_completion_date) - new Date(b.expected_completion_date);
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 유틸리티 함수들
|
|
function getDepartmentText(department) {
|
|
const departments = {
|
|
'production': '생산',
|
|
'quality': '품질',
|
|
'purchasing': '구매',
|
|
'design': '설계',
|
|
'sales': '영업'
|
|
};
|
|
return departments[department] || department;
|
|
}
|
|
|
|
function viewIssueDetail(issueId) {
|
|
window.location.href = `/issues-management.html#issue-${issueId}`;
|
|
}
|
|
|
|
function refreshDashboard() {
|
|
location.reload();
|
|
}
|
|
|
|
// 로그인 처리
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
try {
|
|
const user = await window.authManager.login(username, password);
|
|
if (user) {
|
|
document.getElementById('loginScreen').classList.add('hidden');
|
|
await initializeDashboard();
|
|
}
|
|
} catch (error) {
|
|
alert('로그인에 실패했습니다.');
|
|
}
|
|
});
|
|
|
|
// 페이지 로드 시 초기화
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// AuthManager 로드 대기
|
|
const checkAuthManager = () => {
|
|
if (window.authManager) {
|
|
initializeDashboard();
|
|
} else {
|
|
setTimeout(checkAuthManager, 100);
|
|
}
|
|
};
|
|
checkAuthManager();
|
|
});
|
|
</script>
|
|
|
|
<!-- API 스크립트 동적 로드 -->
|
|
<script>
|
|
function initializeDashboardApp() {
|
|
console.log('✅ API 스크립트 로드 완료 (issues-dashboard.html)');
|
|
}
|
|
|
|
// API 스크립트 동적 로드
|
|
const script = document.createElement('script');
|
|
script.src = '/static/js/api.js?v=' + Date.now();
|
|
script.onload = initializeDashboardApp;
|
|
document.body.appendChild(script);
|
|
</script>
|
|
</body>
|
|
</html>
|