backup: save fixed office seatmap snapshot
This commit is contained in:
hyunho
@@ -5,6 +5,7 @@ let editingMembers = [];
|
||||
let collapsedUnits = new Set();
|
||||
let isListMode = false;
|
||||
let emptyStateMessage = '서버에 조직 데이터가 없습니다. 상단의 업로드 버튼으로 초기 데이터를 넣어주세요.';
|
||||
let photoPreviewObjectUrl = null;
|
||||
|
||||
const levelOrder = ['부서', '그룹', '디비전', '팀', '셀'];
|
||||
const dropdownFields = ['소속회사', '직급', '직책', ...levelOrder];
|
||||
@@ -31,6 +32,26 @@ function cloneMembers(items) {
|
||||
return JSON.parse(JSON.stringify(items));
|
||||
}
|
||||
|
||||
function getPhotoPlaceholder(name = '') {
|
||||
return `https://via.placeholder.com/160?text=${encodeURIComponent(name || 'Profile')}`;
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '')
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''');
|
||||
}
|
||||
|
||||
function resetPhotoPreviewObjectUrl() {
|
||||
if (photoPreviewObjectUrl) {
|
||||
URL.revokeObjectURL(photoPreviewObjectUrl);
|
||||
photoPreviewObjectUrl = null;
|
||||
}
|
||||
}
|
||||
|
||||
function toLegacyMember(item) {
|
||||
return rebuildMemberPath({
|
||||
_id: String(item.id),
|
||||
@@ -94,6 +115,17 @@ async function apiFetch(url, options = {}) {
|
||||
return payload;
|
||||
}
|
||||
|
||||
async function uploadProfilePhoto(file, memberName) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('member_name', memberName || '');
|
||||
const payload = await apiFetch('/api/uploads/profile-photo', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
return payload.url || '';
|
||||
}
|
||||
|
||||
function setMembers(items) {
|
||||
members = items.map(toLegacyMember);
|
||||
if (selectedDept !== '전체' && !members.some((member) => member['부서'] === selectedDept)) {
|
||||
@@ -779,6 +811,66 @@ function toggleFlexibleTime(value) {
|
||||
document.getElementById('flexible-time-area').classList.toggle('hidden', value !== '유연근무제');
|
||||
}
|
||||
|
||||
function updatePhotoPreview(src, fallbackName) {
|
||||
const preview = document.getElementById('m-photo-preview');
|
||||
if (!preview) {
|
||||
return;
|
||||
}
|
||||
preview.src = src || getPhotoPlaceholder(fallbackName);
|
||||
}
|
||||
|
||||
function syncPhotoPreviewFromUrl() {
|
||||
const name = document.getElementById('m-name')?.value?.trim() || '';
|
||||
const url = document.getElementById('m-photo-hidden')?.value?.trim() || '';
|
||||
updatePhotoPreview(url, name);
|
||||
}
|
||||
|
||||
function handlePhotoFileChange(event) {
|
||||
const file = event.target.files?.[0];
|
||||
const fileName = document.getElementById('m-photo-file-name');
|
||||
const name = document.getElementById('m-name')?.value?.trim() || '';
|
||||
resetPhotoPreviewObjectUrl();
|
||||
|
||||
if (!file) {
|
||||
if (fileName) {
|
||||
fileName.textContent = '선택된 파일 없음';
|
||||
}
|
||||
syncPhotoPreviewFromUrl();
|
||||
return;
|
||||
}
|
||||
|
||||
if (fileName) {
|
||||
fileName.textContent = file.name;
|
||||
}
|
||||
photoPreviewObjectUrl = URL.createObjectURL(file);
|
||||
updatePhotoPreview(photoPreviewObjectUrl, name);
|
||||
}
|
||||
|
||||
function renderSeatPreviewCard(seatLabel) {
|
||||
const safeLabel = escapeHtml(seatLabel || '');
|
||||
const badge = safeLabel
|
||||
? `<span class="seat-preview-badge">${safeLabel}</span>`
|
||||
: '<span class="seat-preview-badge seat-preview-badge-muted">미배치</span>';
|
||||
|
||||
return `
|
||||
<div class="seat-preview-card">
|
||||
<div class="seat-preview-head">
|
||||
<div>
|
||||
<strong>재석위치</strong>
|
||||
<p>향후 해당 인원의 좌석 영역을 크롭해 표시하고, 스크롤 확대/축소를 지원할 예정입니다.</p>
|
||||
</div>
|
||||
${badge}
|
||||
</div>
|
||||
<div class="seat-preview-canvas">
|
||||
<div class="seat-preview-placeholder">
|
||||
<span class="seat-preview-placeholder-icon">⌖</span>
|
||||
<span>좌석 이미지 연동 예정</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function switchModalTab(tab) {
|
||||
const isBasic = tab === 'basic';
|
||||
document.getElementById('modal-sec-basic').classList.toggle('hidden', !isBasic);
|
||||
@@ -804,29 +896,30 @@ function openModal(id) {
|
||||
fieldsArea.className = 'flex flex-col items-center gap-6 py-4';
|
||||
fieldsArea.style.maxHeight = 'none';
|
||||
fieldsArea.innerHTML = `
|
||||
<div class="relative w-32 h-32 rounded-full overflow-hidden border-4 border-indigo-100 shadow-lg">
|
||||
<img src="${member['사진'] || 'https://via.placeholder.com/120?text=Profile'}" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-black text-slate-800">${member['이름'] || ''}</h2>
|
||||
<p class="text-indigo-600 font-bold">${member['직급'] || '-'} / ${member['직책'] || '팀원'}</p>
|
||||
<p class="text-slate-400 text-xs mt-1 font-medium">${(member._path || []).map((path) => path.name).join(' > ')}</p>
|
||||
</div>
|
||||
<div class="w-full grid grid-cols-2 gap-3 mt-4">
|
||||
<div class="bg-indigo-50 p-4 rounded-2xl border border-indigo-100 col-span-2 flex items-center gap-4">
|
||||
<div class="flex-1">
|
||||
<label class="text-[10px] text-indigo-400 font-bold block mb-1">연락처</label>
|
||||
<span class="text-sm font-black text-indigo-700">${member['전화번호'] || '정보 없음'}</span>
|
||||
<div class="member-detail-top-row">
|
||||
<div class="relative w-32 h-32 rounded-full overflow-hidden border-4 border-indigo-100 shadow-lg">
|
||||
<img src="${member['사진'] || 'https://via.placeholder.com/120?text=Profile'}" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="member-detail-summary">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-slate-800">${member['이름'] || ''}</h2>
|
||||
<p class="text-indigo-600 font-bold">${member['직급'] || '-'} / ${member['직책'] || '팀원'}</p>
|
||||
<p class="text-slate-400 text-xs mt-1 font-medium">${(member._path || []).map((path) => path.name).join(' > ')}</p>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="text-[10px] text-indigo-400 font-bold block mb-1">이메일</label>
|
||||
<span class="text-sm font-black text-indigo-700">${member['이메일'] || '정보 없음'}</span>
|
||||
<div class="member-inline-info-grid">
|
||||
<div class="member-inline-info-card">
|
||||
<label>전화번호</label>
|
||||
<strong>${member['전화번호'] || '정보 없음'}</strong>
|
||||
</div>
|
||||
<div class="member-inline-info-card">
|
||||
<label>이메일</label>
|
||||
<strong>${member['이메일'] || '정보 없음'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 col-span-2">
|
||||
<label class="text-[10px] text-slate-400 font-bold block mb-1">사무실 위치</label>
|
||||
<span class="text-sm font-black text-slate-700">${member['자리위치'] || '정보 없음'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mt-2">
|
||||
${renderSeatPreviewCard(member['자리위치'] || '')}
|
||||
</div>
|
||||
`;
|
||||
footer.innerHTML = '<button onclick="closeModal()" class="w-full bg-slate-800 text-white py-4 rounded-xl font-bold text-sm shadow-lg">닫기</button>';
|
||||
@@ -836,11 +929,11 @@ function openModal(id) {
|
||||
|
||||
document.getElementById('modal-title').innerText = id ? '구성원 정보 수정' : '신규 구성원 추가';
|
||||
fieldsArea.className = 'flex flex-col w-full';
|
||||
fieldsArea.style.maxHeight = '75vh';
|
||||
fieldsArea.style.overflowY = 'auto';
|
||||
fieldsArea.style.maxHeight = 'none';
|
||||
fieldsArea.style.overflowY = 'visible';
|
||||
|
||||
const sourceValues = isListMode ? editingMembers : members;
|
||||
let orgFields = '<div id="modal-sec-org" class="hidden grid grid-cols-2 gap-4">';
|
||||
let orgFields = '<div id="modal-sec-org" class="hidden grid grid-cols-2 gap-3 modal-form-grid">';
|
||||
dropdownFields.forEach((field) => {
|
||||
const uniqueValues = Array.from(new Set(sourceValues.map((item) => item[field]).filter(Boolean))).sort();
|
||||
const currentValue = member[field] || '';
|
||||
@@ -886,18 +979,55 @@ function openModal(id) {
|
||||
<button id="modal-tab-basic" onclick="switchModalTab('basic')" class="flex-1 py-3 font-bold border-b-2 border-indigo-600 text-indigo-600 text-sm transition-all">기본 정보</button>
|
||||
<button id="modal-tab-org" onclick="switchModalTab('org')" class="flex-1 py-3 font-bold border-b-2 border-transparent text-slate-400 text-sm transition-all">조직 및 근무</button>
|
||||
</div>
|
||||
<div id="modal-sec-basic" class="grid grid-cols-2 gap-4">
|
||||
<div id="modal-sec-basic" class="grid grid-cols-2 gap-3 modal-form-grid">
|
||||
<input type="hidden" id="m-id" value="${id || ''}">
|
||||
<div class="col-span-2"><label class="text-[11px] font-black text-slate-600 block">이름 (필수)</label><input id="m-name" value="${member['이름'] || ''}" class="w-full bg-slate-50 p-3 rounded-xl border font-bold text-sm outline-none"></div>
|
||||
<div class="col-span-2"><label class="text-[11px] font-black text-slate-600 block">사번</label><input id="m-employee-id" value="${member['사번'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none"></div>
|
||||
<div class="col-span-1"><label class="text-[11px] font-black text-slate-600 block">전화번호</label><input id="m-phone" value="${member['전화번호'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none"></div>
|
||||
<div class="col-span-1"><label class="text-[11px] font-black text-slate-600 block">이메일</label><input id="m-email" value="${member['이메일'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none"></div>
|
||||
<div class="col-span-2"><label class="text-[11px] font-black text-slate-600 block">자리 위치</label><input id="m-seat" value="${member['자리위치'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none"></div>
|
||||
<div class="col-span-2"><label class="text-[11px] font-black text-slate-600 block">사진 URL</label><input id="m-photo" value="${member['사진'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none text-xs"></div>
|
||||
<input type="hidden" id="m-photo-hidden" value="${member['사진'] || ''}">
|
||||
<input type="hidden" id="m-seat-hidden" value="${member['자리위치'] || ''}">
|
||||
<div class="col-span-2 member-basic-top-row">
|
||||
<div class="member-photo-field">
|
||||
<label class="text-[11px] font-black text-slate-600 block">프로필 사진</label>
|
||||
<div class="member-photo-upload-card member-photo-upload-card-compact">
|
||||
<div class="member-photo-preview-wrap">
|
||||
<img id="m-photo-preview" src="${member['사진'] || getPhotoPlaceholder(member['이름'] || '')}" alt="프로필 미리보기" class="member-photo-preview">
|
||||
</div>
|
||||
<div class="member-photo-upload-controls">
|
||||
<label class="member-photo-file-label" for="m-photo-file">
|
||||
<input id="m-photo-file" type="file" accept="image/png,image/jpeg,image/webp,image/gif" onchange="handlePhotoFileChange(event)">
|
||||
<span>사진 파일 선택</span>
|
||||
</label>
|
||||
<strong id="m-photo-file-name" class="member-photo-file-name">선택된 파일 없음</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-name-field">
|
||||
<label class="text-[11px] font-black text-slate-600 block">이름 (필수)</label>
|
||||
<input id="m-name" value="${member['이름'] || ''}" oninput="syncPhotoPreviewFromUrl()" class="w-full bg-slate-50 p-3 rounded-xl border font-bold text-sm outline-none">
|
||||
<div class="member-inline-info-grid member-inline-info-grid-edit">
|
||||
<div class="member-inline-info-card">
|
||||
<label>사번</label>
|
||||
<input id="m-employee-id" value="${member['사번'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none">
|
||||
</div>
|
||||
<div class="member-inline-info-card">
|
||||
<label>전화번호</label>
|
||||
<input id="m-phone" value="${member['전화번호'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none">
|
||||
</div>
|
||||
<div class="member-inline-info-card member-inline-info-card-full">
|
||||
<label>이메일</label>
|
||||
<input id="m-email" value="${member['이메일'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="text-[11px] font-black text-slate-600 block mb-2">자리 위치</label>
|
||||
${renderSeatPreviewCard(member['자리위치'] || '')}
|
||||
</div>
|
||||
</div>
|
||||
${orgFields}
|
||||
`;
|
||||
|
||||
resetPhotoPreviewObjectUrl();
|
||||
|
||||
const deleteBtn = id ? `<button onclick="deleteMember('${id}')" class="bg-red-50 text-red-600 py-3.5 px-6 rounded-xl font-bold text-sm border border-red-100 hover:bg-red-100 transition-colors">삭제</button>` : '';
|
||||
footer.innerHTML = `
|
||||
${deleteBtn}
|
||||
@@ -908,6 +1038,7 @@ function openModal(id) {
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
resetPhotoPreviewObjectUrl();
|
||||
document.getElementById('modal').style.display = 'none';
|
||||
document.getElementById('modal-fields').className = 'grid grid-cols-2 gap-x-8 gap-y-5';
|
||||
document.getElementById('modal-fields').style.maxHeight = 'none';
|
||||
@@ -946,8 +1077,12 @@ async function saveMember() {
|
||||
member['근무시간'] = document.getElementById('m-worktime').value;
|
||||
member['전화번호'] = document.getElementById('m-phone').value.trim();
|
||||
member['이메일'] = document.getElementById('m-email').value.trim();
|
||||
member['자리위치'] = document.getElementById('m-seat').value.trim();
|
||||
member['사진'] = document.getElementById('m-photo').value.trim();
|
||||
member['자리위치'] = document.getElementById('m-seat-hidden').value.trim();
|
||||
member['사진'] = document.getElementById('m-photo-hidden').value.trim();
|
||||
const photoFile = document.getElementById('m-photo-file')?.files?.[0];
|
||||
if (photoFile) {
|
||||
member['사진'] = await uploadProfilePhoto(photoFile, member['이름']);
|
||||
}
|
||||
if (member['근무시간'] === '유연근무제') {
|
||||
member['유연근무_시작'] = document.getElementById('m-work-start').value;
|
||||
member['유연근무_종료'] = document.getElementById('m-work-end').value;
|
||||
|
||||
Reference in New Issue
Block a user