feat: 다수 기능 개선 - 순찰, 출근, 작업분석, 모바일 UI 등
- 순찰/점검 기능 개선 (zone-detail 페이지 추가) - 출근/근태 시스템 개선 (연차 조회, 근무현황) - 작업분석 대분류 그룹화 및 마이그레이션 스크립트 - 모바일 네비게이션 UI 추가 - NAS 배포 도구 및 문서 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
494
deploy/tkfb-package/web-ui/js/workplace-layout-map.js
Normal file
494
deploy/tkfb-package/web-ui/js/workplace-layout-map.js
Normal file
@@ -0,0 +1,494 @@
|
||||
// 작업장 레이아웃 지도 관리
|
||||
|
||||
// 전역 변수
|
||||
let layoutMapImage = null;
|
||||
let mapRegions = [];
|
||||
let canvas = null;
|
||||
let ctx = null;
|
||||
let isDrawing = false;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let currentRect = null;
|
||||
|
||||
// ==================== 레이아웃 지도 모달 ====================
|
||||
|
||||
/**
|
||||
* 레이아웃 지도 모달 열기
|
||||
*/
|
||||
async function openLayoutMapModal() {
|
||||
// window 객체에서 currentCategoryId 가져오기
|
||||
const currentCategoryId = window.currentCategoryId;
|
||||
|
||||
if (!currentCategoryId) {
|
||||
window.window.showToast('공장을 먼저 선택해주세요.', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
const modal = document.getElementById('layoutMapModal');
|
||||
if (!modal) return;
|
||||
|
||||
// 캔버스 초기화
|
||||
canvas = document.getElementById('regionCanvas');
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
// 현재 카테고리의 레이아웃 이미지 및 영역 로드
|
||||
await loadLayoutMapData();
|
||||
|
||||
// 작업장 선택 옵션 업데이트
|
||||
updateWorkplaceSelect();
|
||||
|
||||
modal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
/**
|
||||
* 레이아웃 지도 모달 닫기
|
||||
*/
|
||||
function closeLayoutMapModal() {
|
||||
const modal = document.getElementById('layoutMapModal');
|
||||
if (modal) {
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// 캔버스 이벤트 리스너 제거
|
||||
if (canvas) {
|
||||
canvas.removeEventListener('mousedown', startDrawing);
|
||||
canvas.removeEventListener('mousemove', draw);
|
||||
canvas.removeEventListener('mouseup', stopDrawing);
|
||||
}
|
||||
|
||||
// 메인 페이지의 레이아웃 미리보기 업데이트
|
||||
const currentCategoryId = window.currentCategoryId;
|
||||
const categories = window.categories;
|
||||
|
||||
if (currentCategoryId && categories) {
|
||||
const category = categories.find(c => c.category_id == currentCategoryId);
|
||||
if (category && window.updateLayoutPreview) {
|
||||
window.updateLayoutPreview(category);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 레이아웃 지도 데이터 로드
|
||||
*/
|
||||
async function loadLayoutMapData() {
|
||||
try {
|
||||
const currentCategoryId = window.currentCategoryId;
|
||||
const categories = window.categories;
|
||||
|
||||
// 현재 카테고리 정보 가져오기
|
||||
const category = categories.find(c => c.category_id == currentCategoryId);
|
||||
if (!category) return;
|
||||
|
||||
// 레이아웃 이미지 표시
|
||||
const currentImageDiv = document.getElementById('currentLayoutImage');
|
||||
if (category.layout_image) {
|
||||
// 이미지 경로를 전체 URL로 변환
|
||||
const fullImageUrl = category.layout_image.startsWith('http')
|
||||
? category.layout_image
|
||||
: `${window.API_BASE_URL || 'http://localhost:20005/api'}${category.layout_image}`.replace('/api/', '/');
|
||||
|
||||
currentImageDiv.innerHTML = `
|
||||
<img src="${fullImageUrl}" style="max-width: 100%; max-height: 300px; border-radius: 4px;" alt="현재 레이아웃 이미지">
|
||||
`;
|
||||
|
||||
// 캔버스에도 이미지 로드
|
||||
loadImageToCanvas(fullImageUrl);
|
||||
} else {
|
||||
currentImageDiv.innerHTML = '<span style="color: #94a3b8;">업로드된 이미지가 없습니다</span>';
|
||||
}
|
||||
|
||||
// 영역 데이터 로드
|
||||
const regionsResponse = await window.apiCall(`/workplaces/categories/${currentCategoryId}/map-regions`, 'GET');
|
||||
if (regionsResponse && regionsResponse.success) {
|
||||
mapRegions = regionsResponse.data || [];
|
||||
} else {
|
||||
mapRegions = [];
|
||||
}
|
||||
|
||||
renderRegionList();
|
||||
} catch (error) {
|
||||
console.error('레이아웃 지도 데이터 로딩 오류:', error);
|
||||
window.window.showToast('레이아웃 지도 데이터를 불러오는데 실패했습니다.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 이미지를 캔버스에 로드
|
||||
*/
|
||||
function loadImageToCanvas(imagePath) {
|
||||
const img = new Image();
|
||||
img.onload = function() {
|
||||
// 캔버스 크기를 이미지 크기에 맞춤 (최대 800px)
|
||||
const maxWidth = 800;
|
||||
const scale = img.width > maxWidth ? maxWidth / img.width : 1;
|
||||
|
||||
canvas.width = img.width * scale;
|
||||
canvas.height = img.height * scale;
|
||||
|
||||
// 이미지 그리기
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
layoutMapImage = img;
|
||||
|
||||
// 기존 영역들 그리기
|
||||
drawExistingRegions();
|
||||
|
||||
// 캔버스 이벤트 리스너 등록
|
||||
setupCanvasEvents();
|
||||
};
|
||||
img.src = imagePath;
|
||||
}
|
||||
|
||||
/**
|
||||
* 작업장 선택 옵션 업데이트
|
||||
*/
|
||||
function updateWorkplaceSelect() {
|
||||
const select = document.getElementById('regionWorkplaceSelect');
|
||||
if (!select) return;
|
||||
|
||||
const currentCategoryId = window.currentCategoryId;
|
||||
const workplaces = window.workplaces;
|
||||
|
||||
// 현재 카테고리의 작업장만 필터링
|
||||
const categoryWorkplaces = workplaces.filter(w => w.category_id == currentCategoryId);
|
||||
|
||||
let options = '<option value="">작업장을 선택하세요</option>';
|
||||
categoryWorkplaces.forEach(wp => {
|
||||
// 이미 영역이 정의된 작업장은 표시
|
||||
const hasRegion = mapRegions.some(r => r.workplace_id === wp.workplace_id);
|
||||
options += `<option value="${wp.workplace_id}">${wp.workplace_name}${hasRegion ? ' (영역 정의됨)' : ''}</option>`;
|
||||
});
|
||||
|
||||
select.innerHTML = options;
|
||||
}
|
||||
|
||||
// ==================== 이미지 업로드 ====================
|
||||
|
||||
/**
|
||||
* 이미지 미리보기
|
||||
*/
|
||||
function previewLayoutImage(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const currentImageDiv = document.getElementById('currentLayoutImage');
|
||||
currentImageDiv.innerHTML = `
|
||||
<img src="${e.target.result}" style="max-width: 100%; max-height: 300px; border-radius: 4px;" alt="미리보기">
|
||||
<p style="color: #64748b; font-size: 14px; margin-top: 8px;">미리보기 (저장하려면 "이미지 업로드" 버튼을 클릭하세요)</p>
|
||||
`;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
/**
|
||||
* 레이아웃 이미지 업로드
|
||||
*/
|
||||
async function uploadLayoutImage() {
|
||||
const fileInput = document.getElementById('layoutImageFile');
|
||||
const file = fileInput.files[0];
|
||||
|
||||
if (!file) {
|
||||
window.showToast('이미지 파일을 선택해주세요.', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
const currentCategoryId = window.currentCategoryId;
|
||||
|
||||
if (!currentCategoryId) {
|
||||
window.showToast('공장을 먼저 선택해주세요.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// FormData 생성
|
||||
const formData = new FormData();
|
||||
formData.append('image', file);
|
||||
|
||||
// 업로드 요청
|
||||
const response = await fetch(`${window.API_BASE_URL || 'http://localhost:20005/api'}/workplaces/categories/${currentCategoryId}/layout-image`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
},
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
window.showToast('이미지가 성공적으로 업로드되었습니다.', 'success');
|
||||
|
||||
// 이미지 경로를 전체 URL로 변환
|
||||
const fullImageUrl = `${window.API_BASE_URL || 'http://localhost:20005/api'}${result.data.image_path}`.replace('/api/', '/');
|
||||
|
||||
// 이미지를 캔버스에 로드
|
||||
loadImageToCanvas(fullImageUrl);
|
||||
|
||||
// 현재 이미지 미리보기도 업데이트
|
||||
const currentImageDiv = document.getElementById('currentLayoutImage');
|
||||
if (currentImageDiv) {
|
||||
currentImageDiv.innerHTML = `
|
||||
<img src="${fullImageUrl}" style="max-width: 100%; max-height: 300px; border-radius: 4px;" alt="현재 레이아웃 이미지">
|
||||
`;
|
||||
}
|
||||
|
||||
// 카테고리 데이터 새로고침 (workplace-management.js의 loadCategories 함수 호출)
|
||||
if (window.loadCategories) {
|
||||
await window.loadCategories();
|
||||
|
||||
// 메인 페이지 미리보기도 업데이트
|
||||
const currentCategoryId = window.currentCategoryId;
|
||||
const categories = window.categories;
|
||||
if (currentCategoryId && categories && window.updateLayoutPreview) {
|
||||
const category = categories.find(c => c.category_id == currentCategoryId);
|
||||
if (category) {
|
||||
window.updateLayoutPreview(category);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
throw new Error(result.message || '업로드 실패');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('이미지 업로드 오류:', error);
|
||||
window.showToast(error.message || '이미지 업로드 중 오류가 발생했습니다.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 영역 그리기 ====================
|
||||
|
||||
/**
|
||||
* 캔버스 이벤트 설정
|
||||
*/
|
||||
function setupCanvasEvents() {
|
||||
canvas.addEventListener('mousedown', startDrawing);
|
||||
canvas.addEventListener('mousemove', draw);
|
||||
canvas.addEventListener('mouseup', stopDrawing);
|
||||
canvas.addEventListener('mouseleave', stopDrawing);
|
||||
}
|
||||
|
||||
/**
|
||||
* 그리기 시작
|
||||
*/
|
||||
function startDrawing(e) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
startX = e.clientX - rect.left;
|
||||
startY = e.clientY - rect.top;
|
||||
isDrawing = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 그리기
|
||||
*/
|
||||
function draw(e) {
|
||||
if (!isDrawing) return;
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const currentX = e.clientX - rect.left;
|
||||
const currentY = e.clientY - rect.top;
|
||||
|
||||
// 캔버스 다시 그리기
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
if (layoutMapImage) {
|
||||
ctx.drawImage(layoutMapImage, 0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
// 기존 영역들 그리기
|
||||
drawExistingRegions();
|
||||
|
||||
// 현재 그리는 사각형
|
||||
const width = currentX - startX;
|
||||
const height = currentY - startY;
|
||||
|
||||
ctx.strokeStyle = '#3b82f6';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.strokeRect(startX, startY, width, height);
|
||||
|
||||
ctx.fillStyle = 'rgba(59, 130, 246, 0.2)';
|
||||
ctx.fillRect(startX, startY, width, height);
|
||||
|
||||
currentRect = { startX, startY, endX: currentX, endY: currentY };
|
||||
}
|
||||
|
||||
/**
|
||||
* 그리기 종료
|
||||
*/
|
||||
function stopDrawing() {
|
||||
isDrawing = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 기존 영역들 그리기
|
||||
*/
|
||||
function drawExistingRegions() {
|
||||
mapRegions.forEach(region => {
|
||||
const x1 = (region.x_start / 100) * canvas.width;
|
||||
const y1 = (region.y_start / 100) * canvas.height;
|
||||
const x2 = (region.x_end / 100) * canvas.width;
|
||||
const y2 = (region.y_end / 100) * canvas.height;
|
||||
|
||||
ctx.strokeStyle = '#10b981';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
|
||||
|
||||
ctx.fillStyle = 'rgba(16, 185, 129, 0.15)';
|
||||
ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
|
||||
|
||||
// 작업장 이름 표시
|
||||
ctx.fillStyle = '#10b981';
|
||||
ctx.font = '14px sans-serif';
|
||||
ctx.fillText(region.workplace_name || '', x1 + 5, y1 + 20);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 현재 영역 지우기
|
||||
*/
|
||||
function clearCurrentRegion() {
|
||||
currentRect = null;
|
||||
|
||||
// 캔버스 다시 그리기
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
if (layoutMapImage) {
|
||||
ctx.drawImage(layoutMapImage, 0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
drawExistingRegions();
|
||||
}
|
||||
|
||||
/**
|
||||
* 영역 저장
|
||||
*/
|
||||
async function saveRegion() {
|
||||
const workplaceId = document.getElementById('regionWorkplaceSelect').value;
|
||||
|
||||
if (!workplaceId) {
|
||||
window.showToast('작업장을 선택해주세요.', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentRect) {
|
||||
window.showToast('영역을 그려주세요.', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
const currentCategoryId = window.currentCategoryId;
|
||||
|
||||
try {
|
||||
// 비율로 변환 (0~100%)
|
||||
const xStart = Math.min(currentRect.startX, currentRect.endX) / canvas.width * 100;
|
||||
const yStart = Math.min(currentRect.startY, currentRect.endY) / canvas.height * 100;
|
||||
const xEnd = Math.max(currentRect.startX, currentRect.endX) / canvas.width * 100;
|
||||
const yEnd = Math.max(currentRect.startY, currentRect.endY) / canvas.height * 100;
|
||||
|
||||
// 기존 영역이 있는지 확인
|
||||
const existingRegion = mapRegions.find(r => r.workplace_id == workplaceId);
|
||||
|
||||
const regionData = {
|
||||
workplace_id: parseInt(workplaceId),
|
||||
category_id: parseInt(currentCategoryId),
|
||||
x_start: xStart.toFixed(2),
|
||||
y_start: yStart.toFixed(2),
|
||||
x_end: xEnd.toFixed(2),
|
||||
y_end: yEnd.toFixed(2),
|
||||
shape: 'rect'
|
||||
};
|
||||
|
||||
let response;
|
||||
if (existingRegion) {
|
||||
// 수정
|
||||
response = await window.apiCall(`/workplaces/map-regions/${existingRegion.region_id}`, 'PUT', regionData);
|
||||
} else {
|
||||
// 신규 등록
|
||||
response = await window.apiCall('/workplaces/map-regions', 'POST', regionData);
|
||||
}
|
||||
|
||||
if (response && response.success) {
|
||||
window.showToast('영역이 성공적으로 저장되었습니다.', 'success');
|
||||
|
||||
// 데이터 새로고침
|
||||
await loadLayoutMapData();
|
||||
|
||||
// 현재 그림 초기화
|
||||
clearCurrentRegion();
|
||||
|
||||
// 작업장 선택 초기화
|
||||
document.getElementById('regionWorkplaceSelect').value = '';
|
||||
} else {
|
||||
throw new Error(response?.message || '저장 실패');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('영역 저장 오류:', error);
|
||||
window.showToast(error.message || '영역 저장 중 오류가 발생했습니다.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 영역 목록 렌더링
|
||||
*/
|
||||
function renderRegionList() {
|
||||
const listDiv = document.getElementById('regionList');
|
||||
if (!listDiv) return;
|
||||
|
||||
if (mapRegions.length === 0) {
|
||||
listDiv.innerHTML = '<p style="color: #94a3b8; text-align: center; padding: 20px;">정의된 영역이 없습니다</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
let listHtml = '<div style="display: flex; flex-direction: column; gap: 8px;">';
|
||||
|
||||
mapRegions.forEach(region => {
|
||||
listHtml += `
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: white; border: 1px solid #e5e7eb; border-radius: 6px;">
|
||||
<div>
|
||||
<span style="font-weight: 600; color: #1e293b;">${region.workplace_name}</span>
|
||||
<span style="color: #94a3b8; font-size: 12px; margin-left: 8px;">
|
||||
(${region.x_start}%, ${region.y_start}%) ~ (${region.x_end}%, ${region.y_end}%)
|
||||
</span>
|
||||
</div>
|
||||
<button onclick="deleteRegion(${region.region_id})" class="btn-small btn-delete" style="padding: 4px 8px; font-size: 12px;">
|
||||
🗑️ 삭제
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
listHtml += '</div>';
|
||||
listDiv.innerHTML = listHtml;
|
||||
}
|
||||
|
||||
/**
|
||||
* 영역 삭제
|
||||
*/
|
||||
async function deleteRegion(regionId) {
|
||||
if (!confirm('이 영역을 삭제하시겠습니까?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await window.apiCall(`/workplaces/map-regions/${regionId}`, 'DELETE');
|
||||
|
||||
if (response && response.success) {
|
||||
window.showToast('영역이 삭제되었습니다.', 'success');
|
||||
await loadLayoutMapData();
|
||||
} else {
|
||||
throw new Error(response?.message || '삭제 실패');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('영역 삭제 오류:', error);
|
||||
window.showToast(error.message || '영역 삭제 중 오류가 발생했습니다.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// 전역 함수로 노출
|
||||
window.openLayoutMapModal = openLayoutMapModal;
|
||||
window.closeLayoutMapModal = closeLayoutMapModal;
|
||||
window.previewLayoutImage = previewLayoutImage;
|
||||
window.uploadLayoutImage = uploadLayoutImage;
|
||||
window.clearCurrentRegion = clearCurrentRegion;
|
||||
window.saveRegion = saveRegion;
|
||||
window.deleteRegion = deleteRegion;
|
||||
Reference in New Issue
Block a user