1314 lines
56 KiB
JavaScript
1314 lines
56 KiB
JavaScript
import { vars } from './variable.js';
|
|
import { removeCountdownTooltip, resetSort, prepareRecycleBinRendering, initEditPositionMode, deletePosition, renderSizeBar, renderLog, renderEditAuthorUserList } from './pageRenderer.js';
|
|
import { formatBytes, splitBaseAndExt, splitTopPathAndTargetName, hasSpecialChar, getDataFromTreeObject } from './common.js';
|
|
import {
|
|
createFolder,
|
|
renameTarget,
|
|
editAuthor,
|
|
downloadTarget,
|
|
removeTarget,
|
|
deleteTarget,
|
|
downloadTempFile,
|
|
} from './dataManager.js'
|
|
import { getUsers } from './socketManager.js';
|
|
import {
|
|
mgmtFunc_changeProjectState,
|
|
mgmtFunc_changeBannerNotice
|
|
} from './managementFunctions.js';
|
|
import { getList } from './userPermission.js';
|
|
import { getDefaultFilter } from './logFilter.js';
|
|
import { toggleContextFocusBox } from './eventManager.js';
|
|
import { renderManual } from './manualSwiper.js';
|
|
|
|
export async function toggleRecycleBinModal(state) {
|
|
let modal = document.querySelector('.recycle-bin-modal');
|
|
if (!modal) return;
|
|
|
|
//// vars에서 마지막 선택 아이템을 저장한 속성들 초기화
|
|
vars.lastListItem_bin = undefined;
|
|
vars.lastSelectTarget_bin = undefined;
|
|
vars.lastContextTarget_bin = undefined;
|
|
vars.lastListGroupTarget_bin = undefined;
|
|
vars.multiSelectListItemArr_bin = [];
|
|
|
|
// list-item-wrap 초기화
|
|
let listItemWrap = modal.querySelector('.list-body .list-item-wrap');
|
|
listItemWrap.innerHTML = '';
|
|
|
|
if (state == false) {
|
|
modal.style.display = 'none';
|
|
}
|
|
|
|
if (state == true) {
|
|
//// 모달 초기화
|
|
modal.style.display = 'flex';
|
|
|
|
// 정렬 초기화
|
|
resetSort();
|
|
|
|
let titleText = modal.querySelector('.modal-header > .title .left-wrap .title-wrap .text');
|
|
titleText.innerHTML = '휴지통';
|
|
|
|
await prepareRecycleBinRendering();
|
|
}
|
|
}
|
|
|
|
export async function toggleModal(state, toggleParams) {
|
|
let modal = document.querySelector('.archive-modal');
|
|
if (!modal) return;
|
|
|
|
if (state == false) {
|
|
modal.style.display = 'none';
|
|
modal.querySelectorAll('.modal-body > div').forEach(div => {
|
|
div.style.display = 'none';
|
|
})
|
|
|
|
// 모달 닫을 때 저장공간 파이그래프 초기화
|
|
let dom = document.querySelector('.archive-modal .modal-body .size-wrap');
|
|
if (echarts.getInstanceByDom(dom)) {
|
|
echarts.dispose(dom);
|
|
}
|
|
|
|
toggleContextFocusBox(false);
|
|
}
|
|
|
|
if (state == true) {
|
|
//// 모달 초기화
|
|
modal.style.display = 'flex';
|
|
|
|
modal.querySelector('.modal-body').style.padding = '0.5rem 1rem';
|
|
|
|
if (!toggleParams.title) toggleParams.title = '알림';
|
|
let modalTitle = toggleParams.title;
|
|
let modalText = toggleParams.text;
|
|
let modalType = toggleParams.type;
|
|
let resourcePath = toggleParams.resourcePath;
|
|
|
|
let titleText = modal.querySelector('.modal-header > .title .left-wrap .title-wrap .text');
|
|
titleText.innerHTML = modalTitle;
|
|
|
|
let usersCount = modal.querySelector('.modal-header > .title .left-wrap .title-wrap .users-count');
|
|
usersCount.style.display = 'none';
|
|
|
|
//// 권한 바뀐 경우 어떻게 바로 유저 권한 설정 버튼 추가?
|
|
// main.js에서 초기 설정 때 권한이 낮으면 유저 권한 설정 버튼을 삭제하기 때문에
|
|
// if문으로 setUserPermissionBtn 있는지 체크 후 숨김
|
|
let setUserPermissionBtn = modal.querySelector('.modal-header > .title .left-wrap .set-user-permission-btn');
|
|
if (setUserPermissionBtn) setUserPermissionBtn.style.display = 'none';
|
|
|
|
let headerRightWrap = modal.querySelector('.modal-header > .title .right-wrap');
|
|
if(headerRightWrap) headerRightWrap.style.display = 'none';
|
|
|
|
let connectedUsersWrap = modal.querySelector('.modal-body > .connected-users-wrap');
|
|
connectedUsersWrap.style.display = 'none';
|
|
|
|
let manualWrap = modal.querySelector('.modal-body > .manual-wrap');
|
|
manualWrap.style.display = 'none';
|
|
|
|
// let recycleBinWrap = modal.querySelector('.modal-body > .recycle-bin-wrap');
|
|
// recycleBinWrap.style.display = 'none';
|
|
|
|
let sizeWrap = modal.querySelector('.modal-body > .size-wrap');
|
|
sizeWrap.style.display = 'none';
|
|
|
|
let logWrap = modal.querySelector('.modal-body > .log-wrap');
|
|
logWrap.style.display = 'none';
|
|
|
|
let logFilter = modal.querySelector('.log-filter');
|
|
logFilter.style.display = 'none';
|
|
|
|
let textWrap = modal.querySelector('.modal-body > .text-wrap');
|
|
textWrap.innerHTML = '';
|
|
textWrap.style.display = 'flex';
|
|
textWrap.innerHTML = modalText;
|
|
|
|
let projectListWrap = modal.querySelector('.modal-body > .project-list-wrap');
|
|
projectListWrap.innerHTML = '';
|
|
projectListWrap.style.display = 'none';
|
|
|
|
let inputWrap = modal.querySelector('.modal-body > .input-wrap');
|
|
inputWrap.innerHTML = '';
|
|
inputWrap.style.display = 'none';
|
|
|
|
let userListWrap = modal.querySelector('.modal-body > .user-list-wrap');
|
|
// userListWrap.innerHTML = '';
|
|
userListWrap.style.display = 'none';
|
|
|
|
let btnWrap = modal.querySelector('.modal-body > .btn-wrap');
|
|
btnWrap.innerHTML = '';
|
|
btnWrap.style.display = 'none';
|
|
|
|
//// 취소버튼 생성
|
|
// 취소 버튼 필요 시 btnWrap.appendChild(cancelBtn); 추가
|
|
let cancelBtn = document.createElement('div');
|
|
cancelBtn.textContent = '취소';
|
|
cancelBtn.classList.add('cancel-btn');
|
|
cancelBtn.addEventListener('click', () => {
|
|
toggleModal(false);
|
|
})
|
|
|
|
//// 얼럿 모달
|
|
if (modalType == 'alertModal') {
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
toggleModal(false);
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
//// 접속자
|
|
if (modalType == 'connectedUsers') {
|
|
modal.querySelector('.modal-body').style.padding = '';
|
|
textWrap.style.display = 'none';
|
|
usersCount.style.display = 'flex';
|
|
//// 권한 바뀐 경우 어떻게 바로 유저 권한 설정 버튼 추가?
|
|
if (setUserPermissionBtn) setUserPermissionBtn.style.display = 'flex';
|
|
// if (devMenuBtn) devMenuBtn.style.display = 'flex';
|
|
// headerRightWrap.style.display = 'flex';
|
|
connectedUsersWrap.style.display = 'flex';
|
|
}
|
|
|
|
//// 도움말
|
|
if (modalType == 'manual') {
|
|
modal.querySelector('.modal-body').style.padding = '';
|
|
textWrap.style.display = 'none';
|
|
manualWrap.style.display = 'flex';
|
|
|
|
await renderManual();
|
|
}
|
|
|
|
//// 저장공간
|
|
if (modalType == 'size') {
|
|
modal.querySelector('.modal-body').style.padding = '';
|
|
textWrap.style.display = 'none';
|
|
sizeWrap.style.display = 'flex';
|
|
renderSizeBar();
|
|
}
|
|
|
|
//// 활동로그
|
|
if (modalType == 'log') {
|
|
modal.querySelector('.modal-body').style.padding = '';
|
|
textWrap.style.display = 'none';
|
|
logWrap.style.display = 'flex';
|
|
logWrap.style.opacity = '0';
|
|
|
|
const { logDataArr } = await getDefaultFilter();
|
|
|
|
let isInit = true;
|
|
let addFooterLog = false;
|
|
// addFooterLog : 푸터 로그 추가 여부
|
|
// 기본은 true, 활동 로그 모달 열 때 실행하는 renderLog에서는 false
|
|
await renderLog(isInit, addFooterLog, logDataArr);
|
|
|
|
// await getDefaultFilter();
|
|
logFilter.style.display = 'flex';
|
|
|
|
|
|
// 로그 모달 최초 실행 시 vars.isLogModalOpened를 true로 변경
|
|
if (!vars.isLogModalOpened) vars.isLogModalOpened = true;
|
|
}
|
|
|
|
//// 변환
|
|
// if (modalType == 'convert') {
|
|
// let convertBtn = document.createElement('div');
|
|
// convertBtn.textContent = '변환';
|
|
// convertBtn.classList.add('convert-btn');
|
|
// convertBtn.addEventListener('click', () => {
|
|
// // convertPdf(resourcePath);
|
|
// toggleModal(false);
|
|
// })
|
|
// btnWrap.appendChild(convertBtn);
|
|
|
|
// btnWrap.style.display = 'flex';
|
|
// }
|
|
|
|
//// 새 폴더 createFolder, 새 갤러리 폴더 createFolder-gallery, 새 도면 폴더 createFolder-drawing
|
|
if (modalType.includes('createFolder')) {
|
|
let oldName = '';
|
|
|
|
let folderType;
|
|
if (modalType.includes('-')) {
|
|
folderType = modalType.split('-').pop();
|
|
} else { // default
|
|
folderType = null;
|
|
}
|
|
|
|
let textInput = document.createElement('input');
|
|
textInput.classList.add(`${modalType}-input`);
|
|
textInput.classList.add('modal-text-input');
|
|
textInput.id = `${modalType}-input`;
|
|
textInput.type = 'text';
|
|
textInput.value = oldName;
|
|
textInput.spellcheck = false;
|
|
|
|
inputWrap.appendChild(textInput);
|
|
inputWrap.style.display = 'flex';
|
|
textInput.focus();
|
|
|
|
// text input 클릭할 때 경고문구 있으면 삭제
|
|
textInput.addEventListener('click', () => {
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
})
|
|
|
|
// text input 타이핑 할 때 경고문구 있으면 삭제
|
|
textInput.addEventListener('input', () => {
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
})
|
|
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
createFolder(inputWrap, resourcePath, folderType);
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
//// 이름 변경
|
|
if (modalType == 'renameTarget') {
|
|
let oldName = '';
|
|
let data = toggleParams.data;
|
|
let dataTypeKor = toggleParams.dataTypeKor;
|
|
|
|
oldName = data.getElementsByClassName('name-text')[0].innerText;
|
|
if (dataTypeKor == '파일') {
|
|
oldName = splitBaseAndExt(oldName).base;
|
|
}
|
|
|
|
let input = document.createElement('input');
|
|
input.classList.add(`${modalType}-input`);
|
|
input.classList.add('modal-text-input');
|
|
input.id = `${modalType}-input`;
|
|
input.type = 'text';
|
|
input.value = oldName;
|
|
input.spellcheck = false;
|
|
|
|
inputWrap.appendChild(input);
|
|
inputWrap.style.display = 'flex';
|
|
input.focus();
|
|
|
|
// text input 클릭할 때 경고문구 있으면 삭제
|
|
input.addEventListener('click', () => {
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
})
|
|
|
|
// text input 타이핑 할 때 경고문구 있으면 삭제
|
|
input.addEventListener('input', () => {
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
})
|
|
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
renameTarget(toggleParams, inputWrap);
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 작성자 변경
|
|
if (modalType == 'editAuthor') {
|
|
// vars.permissionList에 직원 목록 저장
|
|
let list = await getList();
|
|
list.changePermission = {};
|
|
list.deptUserCount = {};
|
|
list.permission.forEach(p => { list.changePermission[p.user_id] = {user_id : p.user_id, lev : p.lev}})
|
|
list.all.forEach(user => {
|
|
const key = `${user.company}_${user.dept}`;
|
|
if(!list.deptUserCount[key]) list.deptUserCount[key] = 0;
|
|
list.deptUserCount[key]++;
|
|
});
|
|
vars.permissionList = list;
|
|
|
|
// 작성자 변경 모달창 구성
|
|
let editAuthorInputWrap = document.createElement('div');
|
|
editAuthorInputWrap.classList.add('edit-author-input-wrap');
|
|
|
|
let nameLabel = document.createElement('div');
|
|
nameLabel.innerText = '이름';
|
|
|
|
let separator = document.createElement('div');
|
|
separator.classList.add('separator');
|
|
|
|
let nameInput = document.createElement('input');
|
|
nameInput.classList.add(`${modalType}-name-input`);
|
|
nameInput.classList.add('modal-text-input');
|
|
nameInput.id = `${modalType}-name-input`;
|
|
nameInput.type = 'text';
|
|
nameInput.value = toggleParams.authorNm?toggleParams.authorNm:'';
|
|
nameInput.spellcheck = false;
|
|
|
|
nameInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
let keyword = e.target.value.trim().toLowerCase();
|
|
renderEditAuthorUserList(inputWrap, keyword);
|
|
}
|
|
})
|
|
|
|
nameInput.addEventListener('click', (e) => {
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
})
|
|
|
|
nameInput.addEventListener('input', (e) => {
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
// let keyword = nameInput.value.trim().toLowerCase();
|
|
})
|
|
|
|
let searchBtn = document.createElement('div');
|
|
searchBtn.classList.add('search-btn');
|
|
let searchBtnImage = document.createElement('div');
|
|
searchBtnImage.classList.add('image');
|
|
searchBtn.appendChild(searchBtnImage);
|
|
searchBtn.addEventListener('click', (e) => {
|
|
let keyword = nameInput.value.trim().toLowerCase();
|
|
renderEditAuthorUserList(inputWrap, keyword);
|
|
})
|
|
|
|
editAuthorInputWrap.appendChild(nameLabel);
|
|
editAuthorInputWrap.appendChild(separator);
|
|
editAuthorInputWrap.appendChild(nameInput);
|
|
editAuthorInputWrap.appendChild(searchBtn);
|
|
|
|
inputWrap.appendChild(editAuthorInputWrap);
|
|
inputWrap.style.display = 'flex';
|
|
nameInput.focus();
|
|
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.classList.add('disabled');
|
|
confirmBtn.addEventListener('click', () => {
|
|
if (confirmBtn.classList.contains('disabled')) return;
|
|
// 작성자 변경 선택 결과 숨김
|
|
// let selectedUserItem = userListWrap.querySelector('.selected-user-item-wrap .selected-user-item .user-item');
|
|
let selectedUserItem = document.querySelector('.archive-modal .modal-body .user-list-wrap .user-item.selected');
|
|
let newAuthorId = selectedUserItem?.dataset.userId;
|
|
let newAuthorNm = selectedUserItem?.dataset.userNm;
|
|
toggleParams.newAuthorId = newAuthorId;
|
|
toggleParams.newAuthorNm = newAuthorNm;
|
|
editAuthor(toggleParams);
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 다운로드
|
|
if (modalType == 'downloadTarget') {
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
downloadTarget(toggleParams);
|
|
toggleModal(false);
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 휴지통으로 이동
|
|
if (modalType == 'removeTarget') {
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
removeTarget(toggleParams);
|
|
toggleModal(false);
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 삭제
|
|
if (modalType == 'deleteTarget') {
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
deleteTarget(toggleParams);
|
|
toggleModal(false);
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 위치 수정 모드
|
|
if (modalType == 'editPosition') {
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
initEditPositionMode();
|
|
toggleModal(false);
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 위치 삭제 모드
|
|
if (modalType == 'deletePosition') {
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
deletePosition();
|
|
toggleModal(false);
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
btnWrap.appendChild(cancelBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 요약 ai버튼 (임시)
|
|
if (modalType == 'temp_ai') {
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
toggleModal(false);
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 개발자 메뉴 - 프로젝트 상태 설정
|
|
if (modalType == 'changeProjectState') {
|
|
projectListWrap.style.display = 'flex';
|
|
createProjectList(projectListWrap, modalType);
|
|
|
|
// project-list-wrap 영역 클릭할 때 경고문구 있으면 삭제
|
|
projectListWrap.addEventListener('click', () => {
|
|
if (projectListWrap.querySelector('.warn')) projectListWrap.removeChild(projectListWrap.querySelector('.warn'));
|
|
})
|
|
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
// 기존 경고문구 있으면 삭제
|
|
if (projectListWrap.querySelector('.warn')) projectListWrap.removeChild(projectListWrap.querySelector('.warn'));
|
|
|
|
let checkedStatePass = true;
|
|
let checkedStateArr = Object.values(projectListWrap.querySelectorAll('.state-btn.checked'));
|
|
if (checkedStateArr.length == 0) {
|
|
// 프로젝트 활성화/프로젝트 비활성화 상태를 체크하지 않고 확인 누르면 project-list-wrap에 경고 표시
|
|
checkedStatePass = false;
|
|
} else {
|
|
toggleParams.state = checkedStateArr[0].dataset.state === 'true';
|
|
}
|
|
|
|
let selectedProjectPass = true;
|
|
let selectedProjectArr = Object.values(projectListWrap.querySelectorAll('.project-item.selected'));
|
|
if (selectedProjectArr.length == 0) {
|
|
// 프로젝트를 선택하지 않고 확인 누르면 project-list-wrap에 경고 표시
|
|
selectedProjectPass = false;
|
|
} else {
|
|
let projectIdList = [];
|
|
for (let project of selectedProjectArr) {
|
|
// 이미 활성화/비활성화 설정 조건이 적용된 프로젝트는 패스
|
|
if (toggleParams.state && !project.querySelector('.sign').classList.contains('inactive')) continue;
|
|
if (!toggleParams.state && project.querySelector('.sign').classList.contains('inactive')) continue;
|
|
projectIdList.push(project.dataset.projectId);
|
|
}
|
|
toggleParams.projectIdList = JSON.stringify(projectIdList);
|
|
}
|
|
|
|
let text;
|
|
if (toggleParams.state) text = `프로젝트 활성화 및 재시작으로 인해 자동으로 로그아웃됩니다.\n다시 로그인 후 사용해주세요.`;
|
|
if (!toggleParams.state) text = `'${vars.project.project_nm}' 프로젝트가 비활성화되어 자동으로 로그아웃됩니다.`;
|
|
toggleParams.text = text;
|
|
toggleParams.type = modalType;
|
|
|
|
if (checkedStatePass && selectedProjectPass) {
|
|
mgmtFunc_changeProjectState(toggleParams);
|
|
toggleModal(false);
|
|
} else {
|
|
// project-list-wrap에 경고 표시
|
|
let projectListWarn = document.createElement('div');
|
|
projectListWarn.classList.add('warn');
|
|
projectListWarn.style.top = `${projectListWrap.offsetHeight}px`;
|
|
projectListWarn.innerHTML = ``;
|
|
if (!checkedStatePass) projectListWarn.innerHTML += `<span>'프로젝트 활성화/프로젝트 비활성화' 상태를 선택해주세요.</span>`;
|
|
if (!selectedProjectPass) projectListWarn.innerHTML += `<span>프로젝트를 1개 이상 선택해주세요.</span>`;
|
|
projectListWrap.appendChild(projectListWarn);
|
|
}
|
|
})
|
|
|
|
btnWrap.appendChild(confirmBtn);
|
|
btnWrap.appendChild(cancelBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 개발자 메뉴 - 배너 공지 설정
|
|
if (modalType == 'changeBannerNotice') {
|
|
projectListWrap.style.display = 'flex';
|
|
createProjectList(projectListWrap, modalType);
|
|
|
|
// project-list-wrap 영역 클릭할 때 경고문구 있으면 삭제
|
|
projectListWrap.addEventListener('click', () => {
|
|
if (projectListWrap.querySelector('.warn')) projectListWrap.removeChild(projectListWrap.querySelector('.warn'));
|
|
})
|
|
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
// 기존 경고문구 있으면 삭제
|
|
if (projectListWrap.querySelector('.warn')) projectListWrap.removeChild(projectListWrap.querySelector('.warn'));
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
|
|
let checkedStatePass = true;
|
|
let checkedStateArr = Object.values(projectListWrap.querySelectorAll('.state-btn.checked'));
|
|
if (checkedStateArr.length == 0) {
|
|
// 프로젝트 활성화/프로젝트 비활성화 상태를 체크하지 않고 확인 누르면 project-list-wrap에 경고 표시
|
|
checkedStatePass = false;
|
|
} else {
|
|
toggleParams.state = checkedStateArr[0].dataset.state === 'true';
|
|
}
|
|
|
|
let selectedProjectPass = true;
|
|
let selectedProjectArr = Object.values(projectListWrap.querySelectorAll('.project-item.selected'));
|
|
if (selectedProjectArr.length == 0) {
|
|
// 프로젝트를 선택하지 않고 확인 누르면 project-list-wrap에 경고 표시
|
|
selectedProjectPass = false;
|
|
} else {
|
|
let projectIdList = [];
|
|
for (let project of selectedProjectArr) {
|
|
projectIdList.push(project.dataset.projectId);
|
|
}
|
|
toggleParams.projectIdList = JSON.stringify(projectIdList);
|
|
}
|
|
|
|
let inputPass = true;
|
|
if (inputWrap.style.display == 'flex') {
|
|
let noticeText = inputWrap.querySelector('input').value;
|
|
if (noticeText.replace(/\s/g, '') == '') {
|
|
inputPass = false;
|
|
} else {
|
|
toggleParams.text = noticeText;
|
|
}
|
|
} else {
|
|
toggleParams.text = '';
|
|
}
|
|
|
|
if (checkedStatePass && selectedProjectPass && inputPass) {
|
|
mgmtFunc_changeBannerNotice(toggleParams);
|
|
toggleModal(false);
|
|
} else {
|
|
// project-list-wrap에 경고 표시
|
|
let projectListWarn = document.createElement('div');
|
|
projectListWarn.classList.add('warn');
|
|
projectListWarn.style.top = `${projectListWrap.offsetHeight}px`;
|
|
projectListWarn.innerHTML = ``;
|
|
if (!checkedStatePass) projectListWarn.innerHTML += `<span>'배너 공지 표시/배너 공지 해제' 상태를 선택해주세요.</span>`;
|
|
if (!selectedProjectPass) projectListWarn.innerHTML += `<span>프로젝트를 1개 이상 선택해주세요.</span>`;
|
|
// checkedStatePass, selectedProjectPass 둘 중 하나라도 false일 때 projectListWarn 표시
|
|
if (!checkedStatePass || !selectedProjectPass) projectListWrap.appendChild(projectListWarn);
|
|
|
|
let inputWarn = document.createElement('div');
|
|
inputWarn.classList.add('warn');
|
|
inputWarn.style.top = `${inputWrap.offsetHeight}px`;
|
|
inputWarn.innerHTML = '공지 내용을 입력해주세요.';
|
|
if (!inputPass) inputWrap.appendChild(inputWarn);
|
|
}
|
|
})
|
|
|
|
btnWrap.appendChild(confirmBtn);
|
|
btnWrap.appendChild(cancelBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 개발자 메뉴 - 팝업 공지
|
|
if (modalType == 'popupNotice') {
|
|
let textarea = document.createElement('textarea');
|
|
textarea.classList.add(`${modalType}-textarea`);
|
|
textarea.spellcheck = false;
|
|
inputWrap.appendChild(textarea);
|
|
inputWrap.style.display = 'flex';
|
|
textarea.focus();
|
|
|
|
// textarea 클릭할 때 경고문구 있으면 삭제
|
|
textarea.addEventListener('click', () => {
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
})
|
|
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
let noticeText = textarea.value;
|
|
if (noticeText.replace(/\s/g, '') == '') {
|
|
// 기존 경고문구 있으면 삭제
|
|
if (inputWrap.querySelector('.warn')) {
|
|
inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
}
|
|
|
|
// 빈 내용으로 확인 누르면 경고 표시
|
|
let warn = document.createElement('div');
|
|
warn.classList.add('warn');
|
|
warn.style.top = `${inputWrap.offsetHeight}px`;
|
|
warn.innerHTML = '내용을 입력해주세요.';
|
|
inputWrap.appendChild(warn);
|
|
return;
|
|
} else {
|
|
vars.socket.emit('popupNotice', {
|
|
text: noticeText
|
|
});
|
|
toggleModal(false);
|
|
}
|
|
})
|
|
|
|
btnWrap.appendChild(confirmBtn);
|
|
btnWrap.appendChild(cancelBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// 개발자 메뉴 - 강제 로그아웃
|
|
if (modalType == 'forcedLogout') {
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
vars.socket.emit('forcedLogout');
|
|
toggleModal(false);
|
|
})
|
|
|
|
btnWrap.appendChild(confirmBtn);
|
|
btnWrap.appendChild(cancelBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
if (modalType == 'sendMessage') {
|
|
let { targetClientId, sender } = toggleParams;
|
|
let textarea = document.createElement('textarea');
|
|
textarea.classList.add(`${modalType}-textarea`);
|
|
textarea.spellcheck = false;
|
|
inputWrap.appendChild(textarea);
|
|
inputWrap.style.display = 'flex';
|
|
textarea.focus();
|
|
|
|
// textarea 클릭할 때 경고문구 있으면 삭제
|
|
textarea.addEventListener('click', () => {
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
})
|
|
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', () => {
|
|
let noticeText = textarea.value;
|
|
if (noticeText.replace(/\s/g, '') == '') {
|
|
// 기존 경고문구 있으면 삭제
|
|
if (inputWrap.querySelector('.warn')) {
|
|
inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
}
|
|
|
|
// 빈 내용으로 확인 누르면 경고 표시
|
|
let warn = document.createElement('div');
|
|
warn.classList.add('warn');
|
|
warn.style.top = `${inputWrap.offsetHeight}px`;
|
|
warn.innerHTML = '내용을 입력해주세요.';
|
|
inputWrap.appendChild(warn);
|
|
return;
|
|
} else {
|
|
vars.socket.emit('sendMessage', {
|
|
targetClientId: targetClientId,
|
|
sender: sender,
|
|
text: noticeText
|
|
});
|
|
toggleModal(false);
|
|
}
|
|
})
|
|
|
|
btnWrap.appendChild(confirmBtn);
|
|
btnWrap.appendChild(cancelBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
|
|
////// (개발자) 만료 기간 변경
|
|
if (modalType == 'devRenewExpiryDate') {
|
|
let textInput = document.createElement('input');
|
|
textInput.classList.add(`${modalType}-input`);
|
|
textInput.classList.add('modal-text-input');
|
|
textInput.id = `${modalType}-input`;
|
|
textInput.type = 'text';
|
|
textInput.spellcheck = false;
|
|
textInput.addEventListener('input', (e) => {
|
|
// 숫자만 남기기
|
|
let value = e.target.value.replace(/[^0-9]/g, '');
|
|
|
|
// 12자리까지만 허용
|
|
if (value.length > 12) value = value.slice(0, 12);
|
|
|
|
e.target.value = value;
|
|
})
|
|
|
|
inputWrap.appendChild(textInput);
|
|
inputWrap.style.display = 'flex';
|
|
textInput.focus();
|
|
|
|
let confirmBtn = document.createElement('div');
|
|
confirmBtn.textContent = '확인';
|
|
confirmBtn.classList.add('confirm-btn');
|
|
confirmBtn.addEventListener('click', async () => {
|
|
let inputSeconds = (textInput.value == '') ? 1296000 : textInput.value;
|
|
|
|
let renewExpiryDateParams = {
|
|
userInfoString: vars.userInfoString,
|
|
storageType: vars.storageType,
|
|
resourcePath: toggleParams.resourcePath,
|
|
dataId: toggleParams.dataId,
|
|
depth3DataIdArr: toggleParams.depth3DataIdArr,
|
|
folderName: toggleParams.folderName,
|
|
inputSeconds: inputSeconds
|
|
}
|
|
let renewExpiryDateRes = await axios.post(`${vars.path_name}/renewExpiryDate`, { params: renewExpiryDateParams });
|
|
if (renewExpiryDateRes.data.message == 'renewExpiryDate_success') {
|
|
console.log('renewExpiryDate_success');
|
|
|
|
// renewExpiryDateBtn을 클릭하면 countdownTooltip dom 제거 및 툴팁타이머, 트리아이템타이머 제거
|
|
removeCountdownTooltip();
|
|
clearInterval(document.querySelector(`.tree-item-wrap[data-resource-path="${renewExpiryDateParams.resourcePath}"]`).countdownTimer);
|
|
document.querySelector(`.tree-item-wrap[data-resource-path="${renewExpiryDateParams.resourcePath}"]`).countdownTimer = null;
|
|
|
|
let toggleParams = {
|
|
text: `'${renewExpiryDateParams.folderName}' 폴더의 만료 기간이 ${inputSeconds}초로 변경되었습니다.`,
|
|
type: 'alertModal'
|
|
};
|
|
toggleModal(true, toggleParams);
|
|
}
|
|
})
|
|
btnWrap.appendChild(confirmBtn);
|
|
|
|
btnWrap.style.display = 'flex';
|
|
}
|
|
}
|
|
}
|
|
|
|
export function toggleDevMenuModal(state) {
|
|
let devMenuModal = document.querySelector('.dev-menu-modal');
|
|
if (!devMenuModal) return;
|
|
|
|
if (state == false) {
|
|
devMenuModal.style.display = 'none';
|
|
}
|
|
|
|
if (state == true) {
|
|
devMenuModal.style.display = 'flex';
|
|
getUsers();
|
|
|
|
let toggleWrap = devMenuModal.querySelector('.modal-body .left .toggle-wrap');
|
|
let btnWrap = devMenuModal.querySelector('.modal-body .left .btn-wrap');
|
|
|
|
toggleWrap.innerHTML = '';
|
|
btnWrap.innerHTML = '';
|
|
|
|
//// 토글
|
|
|
|
// 프로젝트 상태 설정 토글 버튼
|
|
let projectStateToggle = document.createElement('div');
|
|
projectStateToggle.classList.add('btn');
|
|
projectStateToggle.classList.add('project-state-toggle');
|
|
|
|
// 프로젝트 상태 설정 토글 버튼 내부 텍스트 및 상태
|
|
let projectStateToggleText = document.createElement('div');
|
|
projectStateToggleText.classList.add('text');
|
|
projectStateToggleText.innerHTML = '프로젝트 상태 설정';
|
|
if (vars.project.is_active) {
|
|
projectStateToggle.classList.remove('inactive');
|
|
} else {
|
|
projectStateToggle.classList.add('inactive');
|
|
}
|
|
|
|
// 프로젝트 상태 설정 토글 버튼 내부 스위치
|
|
let projectStateToggleSwitch = document.createElement('div');
|
|
projectStateToggleSwitch.classList.add('project-state-toggle-switch');
|
|
projectStateToggleSwitch.classList.add('toggle-switch');
|
|
|
|
// 프로젝트 상태 설정 토글 버튼 내부 스위치 트랙
|
|
let projectStateToggleSwitchTrack = document.createElement('div');
|
|
projectStateToggleSwitchTrack.classList.add('project-state-toggle-switch-track');
|
|
projectStateToggleSwitchTrack.classList.add('toggle-switch-track');
|
|
|
|
// 프로젝트 상태 설정 토글 버튼 내부 스위치 썸
|
|
let projectStateToggleSwitchThumb = document.createElement('div');
|
|
projectStateToggleSwitchThumb.classList.add('toggle-switch-thumb');
|
|
|
|
// 프로젝트 상태 설정 토글 버튼 클릭 이벤트 추가
|
|
projectStateToggle.addEventListener('click', () => {
|
|
let toggleParams = {
|
|
title: '프로젝트 상태 설정',
|
|
text: `<span>'프로젝트 활성화/프로젝트 비활성화' 상태를 선택해주세요.</span>`,
|
|
};
|
|
toggleParams.type = 'changeProjectState';
|
|
toggleModal(true, toggleParams);
|
|
});
|
|
|
|
projectStateToggleSwitchTrack.appendChild(projectStateToggleSwitchThumb);
|
|
|
|
projectStateToggleSwitch.appendChild(projectStateToggleSwitchTrack);
|
|
|
|
projectStateToggle.appendChild(projectStateToggleText);
|
|
projectStateToggle.appendChild(projectStateToggleSwitch);
|
|
|
|
// 배너 공지 설정 토글 버튼
|
|
let bannerNoticeToggle = document.createElement('div');
|
|
bannerNoticeToggle.classList.add('btn');
|
|
bannerNoticeToggle.classList.add('banner-notice-toggle');
|
|
|
|
// 배너 공지 설정 토글 버튼 내부 텍스트 및 상태
|
|
let bannerNoticeToggleText = document.createElement('div');
|
|
bannerNoticeToggleText.classList.add('text');
|
|
bannerNoticeToggleText.innerHTML = '배너 공지 설정';
|
|
if (vars.project.banner_notice == '') {
|
|
bannerNoticeToggle.classList.add('inactive');
|
|
} else {
|
|
bannerNoticeToggle.classList.remove('inactive');
|
|
}
|
|
|
|
// 배너 공지 설정 토글 버튼 내부 스위치
|
|
let bannerNoticeToggleSwitch = document.createElement('div');
|
|
bannerNoticeToggleSwitch.classList.add('banner-notice-toggle-switch');
|
|
bannerNoticeToggleSwitch.classList.add('toggle-switch');
|
|
|
|
// 배너 공지 설정 토글 버튼 내부 스위치 트랙
|
|
let bannerNoticeToggleSwitchTrack = document.createElement('div');
|
|
bannerNoticeToggleSwitchTrack.classList.add('banner-notice-toggle-switch-track');
|
|
bannerNoticeToggleSwitchTrack.classList.add('toggle-switch-track');
|
|
|
|
// 배너 공지 설정 토글 버튼 내부 스위치 썸
|
|
let bannerNoticeToggleSwitchThumb = document.createElement('div');
|
|
bannerNoticeToggleSwitchThumb.classList.add('toggle-switch-thumb');
|
|
|
|
// 배너 공지 설정 토글 버튼 클릭 이벤트 추가
|
|
bannerNoticeToggle.addEventListener('click', () => {
|
|
let toggleParams = {
|
|
title: '배너 공지 설정',
|
|
text: `<span>'배너 공지 표시/배너 공지 해제' 상태를 선택해주세요.</span>`,
|
|
};
|
|
// useInput: true
|
|
toggleParams.type = 'changeBannerNotice';
|
|
toggleModal(true, toggleParams);
|
|
});
|
|
|
|
bannerNoticeToggleSwitchTrack.appendChild(bannerNoticeToggleSwitchThumb);
|
|
|
|
bannerNoticeToggleSwitch.appendChild(bannerNoticeToggleSwitchTrack);
|
|
|
|
bannerNoticeToggle.appendChild(bannerNoticeToggleText);
|
|
bannerNoticeToggle.appendChild(bannerNoticeToggleSwitch);
|
|
|
|
//// 버튼
|
|
|
|
// Queue 대시보드 버튼
|
|
let queueBtn = document.createElement('div');
|
|
queueBtn.classList.add('btn');
|
|
queueBtn.classList.add('queue');
|
|
queueBtn.innerHTML = 'Queue 대시보드';
|
|
queueBtn.addEventListener('click', async () => {
|
|
window.open(`/admin/queues/`, '_blank');
|
|
});
|
|
|
|
// 사용자 통계 버튼 (개발예정)
|
|
let userStatsBtn = document.createElement('div');
|
|
userStatsBtn.classList.add('btn');
|
|
userStatsBtn.classList.add('user-stats');
|
|
userStatsBtn.innerHTML = '사용자 통계 (개발예정)';
|
|
userStatsBtn.addEventListener('click', async () => {
|
|
console.log('사용자 통계 (개발예정)');
|
|
});
|
|
|
|
// 데이터 통계 버튼 (개발예정)
|
|
let dataStatsBtn = document.createElement('div');
|
|
dataStatsBtn.classList.add('btn');
|
|
dataStatsBtn.classList.add('data-stats');
|
|
dataStatsBtn.innerHTML = '데이터 통계 (개발예정)';
|
|
dataStatsBtn.addEventListener('click', async () => {
|
|
console.log('데이터 통계 (개발예정)');
|
|
});
|
|
|
|
// 팝업 공지 버튼
|
|
let popupNoticeBtn = document.createElement('div');
|
|
popupNoticeBtn.classList.add('btn');
|
|
popupNoticeBtn.classList.add('popup-notice');
|
|
popupNoticeBtn.innerHTML = '팝업 공지';
|
|
popupNoticeBtn.addEventListener('click', async () => {
|
|
let toggleParams = {
|
|
title: '팝업 공지',
|
|
text: `
|
|
<span>공지할 내용을 입력한 후 확인을 눌러주세요.</span>
|
|
<span class="warn">확인을 누르면 접속중인 모든 사용자에게 팝업 공지가 발송됩니다. 주의해주세요.</span>
|
|
`,
|
|
type: 'popupNotice',
|
|
};
|
|
toggleModal(true, toggleParams);
|
|
});
|
|
|
|
// 강제 로그아웃 버튼
|
|
let forcedLogoutBtn = document.createElement('div');
|
|
forcedLogoutBtn.classList.add('btn');
|
|
forcedLogoutBtn.classList.add('forcedLogout');
|
|
forcedLogoutBtn.innerHTML = '강제 로그아웃';
|
|
forcedLogoutBtn.addEventListener('click', async () => {
|
|
let toggleParams = {
|
|
title: '강제 로그아웃',
|
|
// text: `
|
|
// <span>강제 로그아웃을 진행 하시겠습니까?</span>
|
|
// <span class="warn">
|
|
// 확인을 누르면 모든 사용자가 로그아웃됩니다. 주의해주세요.<br>
|
|
// (개발자는 alert만 표시되고 로그아웃은 진행되지 않습니다.)
|
|
// </span>
|
|
// `,
|
|
text: `
|
|
<span>강제 로그아웃을 진행 하시겠습니까?</span>
|
|
<span class="warn">확인을 누르면 모든 사용자가 로그아웃됩니다. 주의해주세요.</span>
|
|
<span class="warn">(개발자는 alert만 표시되고 로그아웃은 진행되지 않습니다.)</span>
|
|
`,
|
|
type: 'forcedLogout',
|
|
};
|
|
toggleModal(true, toggleParams);
|
|
});
|
|
|
|
// 오브젝트 스토리지 정리 버튼 (개발예정)
|
|
let cleanUpBtn = document.createElement('div');
|
|
cleanUpBtn.classList.add('btn');
|
|
cleanUpBtn.classList.add('clean-up');
|
|
cleanUpBtn.innerHTML = '오브젝트 스토리지 정리 (개발예정)';
|
|
cleanUpBtn.addEventListener('click', async () => {
|
|
console.log('오브젝트 스토리지 정리 (개발예정)');
|
|
});
|
|
|
|
// 강제 동시접속자 로그 기록
|
|
let insertLogBtn = document.createElement('div');
|
|
insertLogBtn.classList.add('btn');
|
|
insertLogBtn.classList.add('insert-log');
|
|
insertLogBtn.innerHTML = '최대 동시접속자 로그 기록';
|
|
insertLogBtn.addEventListener('click', async () => {
|
|
vars.socket.emit('insertLog', {
|
|
text: 'insertLog',
|
|
});
|
|
console.log('동시접속자수 로그 기록');
|
|
});
|
|
|
|
|
|
//// toggle-wrap, btn-wrap에 추가
|
|
toggleWrap.appendChild(projectStateToggle);
|
|
toggleWrap.appendChild(bannerNoticeToggle);
|
|
|
|
btnWrap.appendChild(queueBtn);
|
|
btnWrap.appendChild(userStatsBtn);
|
|
btnWrap.appendChild(dataStatsBtn);
|
|
btnWrap.appendChild(popupNoticeBtn);
|
|
btnWrap.appendChild(forcedLogoutBtn);
|
|
btnWrap.appendChild(cleanUpBtn);
|
|
btnWrap.appendChild(insertLogBtn);
|
|
}
|
|
}
|
|
|
|
function createProjectList(projectListWrap, modalType) {
|
|
let textWrap = document.querySelector('.archive-modal .modal-body .text-wrap');
|
|
let inputWrap = document.querySelector('.archive-modal .modal-body .input-wrap');
|
|
|
|
let topWrap = document.createElement('div');
|
|
topWrap.classList.add('top-wrap');
|
|
topWrap.classList.toggle(modalType);
|
|
|
|
let topBtnWrap = document.createElement('div');
|
|
topBtnWrap.classList.add('btn-wrap');
|
|
|
|
let stateTrue = document.createElement('div');
|
|
stateTrue.classList.add('state-true');
|
|
stateTrue.classList.add('state-btn');
|
|
stateTrue.classList.add('btn');
|
|
stateTrue.dataset.state = true;
|
|
|
|
let stateTrueRadio = document.createElement('input');
|
|
stateTrueRadio.classList.add('radio');
|
|
stateTrueRadio.type = 'radio';
|
|
stateTrueRadio.name = 'state';
|
|
|
|
let stateTrueText = document.createElement('div');
|
|
stateTrueText.classList.add('text');
|
|
if (modalType == 'changeProjectState') stateTrueText.innerHTML = '프로젝트 활성화';
|
|
if (modalType == 'changeBannerNotice') stateTrueText.innerHTML = '배너 공지 표시';
|
|
|
|
stateTrue.appendChild(stateTrueRadio);
|
|
stateTrue.appendChild(stateTrueText);
|
|
|
|
stateTrue.addEventListener('click', function(e) {
|
|
projectListWrap.querySelectorAll('.top-wrap .btn').forEach(btn => {
|
|
btn.classList.remove('checked');
|
|
})
|
|
e.target.classList.add('checked');
|
|
e.target.querySelector('.radio').checked = true;
|
|
|
|
if (modalType == 'changeProjectState') {
|
|
textWrap.innerHTML = `<span>'프로젝트 활성화/프로젝트 비활성화' 상태와 프로젝트를 선택한 후 확인을 눌러주세요.</span>`;
|
|
}
|
|
|
|
if (modalType == 'changeBannerNotice') {
|
|
textWrap.innerHTML = `
|
|
<span>'배너 공지 표시/배너 공지 해제' 상태와 프로젝트를 선택하고, 공지 내용을 입력한 후 확인을 눌러주세요.</span>
|
|
<span class="warn">배너 공지를 표시 상태로 설정하면 해당 프로젝트에서 배너 공지가 표시됩니다. 주의해주세요.</span>
|
|
`;
|
|
|
|
let inputTitle = document.createElement('div');
|
|
inputTitle.classList.add('input-title');
|
|
inputTitle.innerHTML = '공지 내용';
|
|
|
|
let input = document.createElement('input');
|
|
input.classList.add(`${modalType}-input`);
|
|
input.classList.add('modal-text-input');
|
|
input.id = `${modalType}-input`;
|
|
input.type = 'text';
|
|
input.spellcheck = false;
|
|
|
|
let projectListWrapWidth = projectListWrap.offsetWidth;
|
|
input.style.width = `${projectListWrapWidth}px`;
|
|
|
|
inputWrap.innerHTML = '';
|
|
inputWrap.appendChild(inputTitle);
|
|
inputWrap.appendChild(input);
|
|
inputWrap.style.display = 'flex';
|
|
input.focus();
|
|
|
|
// text input 클릭할 때 경고문구 있으면 삭제
|
|
input.addEventListener('click', () => {
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
})
|
|
|
|
// text input 타이핑 할 때 경고문구 있으면 삭제
|
|
input.addEventListener('input', () => {
|
|
if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
|
|
})
|
|
}
|
|
})
|
|
|
|
let stateFalse = document.createElement('div');
|
|
stateFalse.classList.add('state-false');
|
|
stateFalse.classList.add('state-btn');
|
|
stateFalse.classList.add('btn');
|
|
stateFalse.dataset.state = false;
|
|
|
|
let stateFalseRadio = document.createElement('input');
|
|
stateFalseRadio.classList.add('radio');
|
|
stateFalseRadio.type = 'radio';
|
|
stateFalseRadio.name = 'state';
|
|
|
|
let stateFalseText = document.createElement('div');
|
|
stateFalseText.classList.add('text');
|
|
if (modalType == 'changeProjectState') stateFalseText.innerHTML = '프로젝트 비활성화';
|
|
if (modalType == 'changeBannerNotice') stateFalseText.innerHTML = '배너 공지 해제';
|
|
|
|
stateFalse.appendChild(stateFalseRadio);
|
|
stateFalse.appendChild(stateFalseText);
|
|
|
|
stateFalse.addEventListener('click', function(e) {
|
|
projectListWrap.querySelectorAll('.top-wrap .btn').forEach(btn => {
|
|
btn.classList.remove('checked');
|
|
})
|
|
e.target.classList.add('checked');
|
|
e.target.querySelector('.radio').checked = true;
|
|
|
|
if (modalType == 'changeProjectState') {
|
|
textWrap.innerHTML = `
|
|
<span>'프로젝트 활성화/프로젝트 비활성화' 상태와 프로젝트를 선택한 후 확인을 눌러주세요.</span>
|
|
<span class="warn">프로젝트를 비활성화 상태로 설정하면 해당 프로젝트의 모든 사용자가 로그아웃됩니다. 주의해주세요.</span>
|
|
<span class="warn">(개발자는 alert만 표시되고 로그아웃은 진행되지 않습니다.)</span>
|
|
`
|
|
}
|
|
|
|
if (modalType == 'changeBannerNotice') {
|
|
textWrap.innerHTML = `<span>'배너 공지 표시/배너 공지 해제' 상태와 프로젝트를 선택한 후 확인을 눌러주세요.</span>`;
|
|
|
|
inputWrap.style.display = 'none';
|
|
}
|
|
})
|
|
|
|
let info = document.createElement('div');
|
|
info.classList.add('info');
|
|
|
|
let activeText, inactiveText;
|
|
if (modalType == 'changeProjectState') activeText = '프로젝트 활성화 상태', inactiveText = '프로젝트 비활성화 상태';
|
|
if (modalType == 'changeBannerNotice') activeText = '배너 공지 표시 상태', inactiveText = '배너 공지 해제 상태';
|
|
info.innerHTML = `
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="sign"></div>
|
|
<div class="text">${activeText}</div>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="sign inactive"></div>
|
|
<div class="text">${inactiveText}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
info.innerHTML += '<div class="notice-text">※ 현재 접속중인 프로젝트는 <span>파란색</span>으로 표시됩니다.</div>';
|
|
|
|
topBtnWrap.appendChild(stateTrue);
|
|
topBtnWrap.appendChild(stateFalse);
|
|
|
|
topWrap.appendChild(topBtnWrap);
|
|
topWrap.appendChild(info);
|
|
|
|
projectListWrap.appendChild(topWrap);
|
|
|
|
|
|
|
|
let bottomWrap = document.createElement('div');
|
|
bottomWrap.classList.add('bottom-wrap');
|
|
bottomWrap.classList.toggle(modalType);
|
|
|
|
let bottomBtnWrap = document.createElement('div');
|
|
bottomBtnWrap.classList.add('btn-wrap');
|
|
|
|
let selectAll = document.createElement('div');
|
|
selectAll.classList.add('select-all');
|
|
selectAll.classList.add('btn');
|
|
selectAll.innerHTML = '전체 선택';
|
|
selectAll.addEventListener('click', function() {
|
|
projectListWrap.querySelectorAll('.project-item').forEach(projectItem => {
|
|
projectItem.classList.add('selected');
|
|
})
|
|
})
|
|
let clearAll = document.createElement('div');
|
|
clearAll.classList.add('clear-all');
|
|
clearAll.classList.add('btn');
|
|
clearAll.innerHTML = '전체 해제';
|
|
clearAll.addEventListener('click', function() {
|
|
projectListWrap.querySelectorAll('.project-item').forEach(projectItem => {
|
|
projectItem.classList.remove('selected');
|
|
})
|
|
})
|
|
|
|
bottomBtnWrap.appendChild(selectAll);
|
|
bottomBtnWrap.appendChild(clearAll);
|
|
|
|
let categoryArr = Object.values(vars.allProject).map(project =>
|
|
project.category
|
|
);
|
|
categoryArr = [...new Set(categoryArr)];
|
|
|
|
// categoryArr.length가 1보다 클 때 (onpremise) -> categoryArr 순서 재배치
|
|
if (categoryArr.length > 1) {
|
|
if (vars.serviceName == 'PM_ver4_LOCAL' || vars.serviceName == 'PM_ver4_ONPREMISE') {
|
|
categoryArr = ['task', 'gpd', 'tdc', 'overseas', 'bimproject'];
|
|
}
|
|
|
|
if (vars.serviceName == 'PM_ver4_CLOUD_OVERSEAS') {
|
|
categoryArr = ['overseas', 'bimproject', 'jangheon' , 'jangheonindustry'];
|
|
}
|
|
}
|
|
|
|
let categoryKor = {
|
|
'task': '과업',
|
|
'gpd': '총괄기획실',
|
|
'tdc': '기술개발센터',
|
|
'overseas': '해외사업',
|
|
'bimproject': 'BIM지원사업',
|
|
'jangheon': '장헌',
|
|
'jangheonindustry' : '장헌산업'
|
|
};
|
|
|
|
let categoryWrap = document.createElement('div');
|
|
categoryWrap.classList.add('category-wrap');
|
|
|
|
for (let category of categoryArr) {
|
|
let categoryItem = document.createElement('div');
|
|
categoryItem.classList.add('category-item');
|
|
categoryItem.classList.add(category);
|
|
|
|
let projectItemWrap = document.createElement('div');
|
|
projectItemWrap.classList.add('project-item-wrap');
|
|
projectItemWrap.classList.add('btn-wrap');
|
|
projectItemWrap.classList.add('scrollbar');
|
|
|
|
// categoryArr.length가 1보다 클 때 (onpremise) -> categoty-item에 타이틀 추가
|
|
if (categoryArr.length > 1) {
|
|
let title = document.createElement('div');
|
|
title.classList.add('title');
|
|
title.innerHTML = `${category.toUpperCase()} - ${categoryKor[category]}`;
|
|
|
|
categoryItem.appendChild(title);
|
|
}
|
|
|
|
categoryItem.appendChild(projectItemWrap);
|
|
|
|
categoryWrap.appendChild(categoryItem);
|
|
}
|
|
|
|
bottomWrap.appendChild(bottomBtnWrap);
|
|
bottomWrap.appendChild(categoryWrap);
|
|
projectListWrap.appendChild(bottomWrap);
|
|
|
|
// let keep = [];
|
|
for (let project of Object.values(vars.allProject)) {
|
|
let projectItem = document.createElement('div');
|
|
projectItem.classList.add('project-item');
|
|
projectItem.classList.add('btn');
|
|
if (project.project_id == vars.project.project_id) {
|
|
projectItem.classList.add('current-project');
|
|
}
|
|
projectItem.dataset.projectId = project.project_id;
|
|
|
|
let text = document.createElement('div');
|
|
text.classList.add('text');
|
|
text.innerHTML = project.project_nm;
|
|
|
|
let sign = document.createElement('div');
|
|
sign.classList.add('sign');
|
|
|
|
if (modalType == 'changeProjectState' && !project.is_active
|
|
|| modalType == 'changeBannerNotice' && project.banner_notice == '') sign.classList.add('inactive');
|
|
|
|
projectItem.appendChild(sign);
|
|
projectItem.appendChild(text);
|
|
|
|
// // categoryArr.length가 1보다 클 때 (onpremise) -> 카테고리가 overseas인 project-item들은 keep 배열에 보관
|
|
// if (categoryArr.length > 1 && project.category == 'overseas') {
|
|
// keep.push(projectItem);
|
|
// } else {
|
|
// projectListWrap.querySelector(`.category-item.${project.category} .project-item-wrap`).appendChild(projectItem);
|
|
// }
|
|
|
|
projectListWrap.querySelector(`.category-item.${project.category} .project-item-wrap`).appendChild(projectItem);
|
|
|
|
projectItem.addEventListener('click', function(e) {
|
|
e.target.classList.toggle('selected');
|
|
// if (e.target.classList.contains('selected') && inputWrap.style.display == 'flex') {
|
|
// inputWrap.querySelector('input').value = project.banner_notice;
|
|
// }
|
|
})
|
|
}
|
|
|
|
// 카테고리 아이템에 포함된 프로젝트 개수가 0개인 경우 카테고리 아이템 삭제
|
|
document.querySelectorAll('.category-wrap .category-item').forEach(item => {
|
|
if (item.querySelector('.project-item-wrap').children.length == 0) item.remove();
|
|
})
|
|
|
|
// // categoryArr.length가 1보다 클 때 (onpremise) -> keep 배열에 보관해둔 project-item들을 국내사업 카테고리에 추가
|
|
// if (categoryArr.length > 1) {
|
|
// keep.forEach(projectItem =>{
|
|
// projectListWrap.querySelector(`.domestic .project-item-wrap`).appendChild(projectItem);
|
|
// })
|
|
// }
|
|
} |