765 lines
33 KiB
JavaScript
765 lines
33 KiB
JavaScript
import { vars } from '../archive/variable.js';
|
|
import { displayFileName, checkDuplicatesFileNameAndExt , restrictToNumber, calculateTotalJointContract, showToolTip, overviewVarsInit } from './overviewCommon.js';
|
|
import { makeTaskHistory } from './overviewPageRenderer.js';
|
|
import { overviewVars } from './overviewVariable.js';
|
|
|
|
//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Overview 모달 공통 사용 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
|
|
|
|
// 모달CLSOE
|
|
const modalNames = ['facility-size', 'section-left', 'section-middle', 'schedule-list', 'schedule', 'task-period'];
|
|
modalNames.forEach(name => {
|
|
const modal = document.querySelector(`.overview-modal.${name}`);
|
|
if (!modal) return;
|
|
|
|
const closeBtn = modal.querySelector('.overview-modal-header--end img');
|
|
const footerCloseBtn = modal.querySelector('.modal-footer .btn-close');
|
|
|
|
closeBtn?.addEventListener('click', () => {
|
|
modal.style.display = 'none';
|
|
document.querySelector('.overview-modal-wrapper').style.display = 'none';
|
|
// 변수 초기화
|
|
overviewVarsInit();
|
|
});
|
|
|
|
footerCloseBtn?.addEventListener('click', () => {
|
|
modal.style.display = 'none';
|
|
document.querySelector('.overview-modal-wrapper').style.display = 'none';
|
|
// 변수 초기화
|
|
overviewVarsInit();
|
|
});
|
|
});
|
|
|
|
// 모달 영역 외에 클릭했을때 모달 꺼지는 이벤트
|
|
// document.querySelector('.overview-modal-wrapper')?.addEventListener('pointerdown', (e) => {
|
|
// document.querySelector('.overview-modal-wrapper').style.display = 'none';
|
|
// document.querySelectorAll('.overview-modal').forEach(modal => {
|
|
// if (!modal.contains(e.target)) {
|
|
// modal.style.display = 'none';
|
|
// }
|
|
// });
|
|
// });
|
|
|
|
// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Overview 모달 공통 사용 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
|
|
|
|
//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Secion-Left 모달 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
|
|
|
|
// 위치도/개요도 드래그앤드롭
|
|
export function fileDragAndDrop() {
|
|
const dropbox = document.querySelector('.overview-modal .dropbox');
|
|
|
|
dropbox.addEventListener('dragenter', (e) => {
|
|
e.preventDefault();
|
|
dropbox.style.background = '#999';
|
|
});
|
|
|
|
dropbox.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropbox.style.background = '#999';
|
|
});
|
|
|
|
dropbox.addEventListener('dragleave', (e) => {
|
|
e.preventDefault();
|
|
dropbox.style.background = '#e6e8ea';
|
|
});
|
|
|
|
dropbox.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropbox.style.background = '#e6e8ea';
|
|
const files = Array.from(e.dataTransfer.files);
|
|
|
|
// 중복 이름과 확장자 체크
|
|
checkDuplicatesFileNameAndExt(files);
|
|
displayFileName();
|
|
|
|
});
|
|
};
|
|
|
|
// section-left 모달 열기
|
|
document.querySelector('.overview .box-header--right.section-left-edit')?.addEventListener('click', () => {
|
|
const modal = document.querySelector('.overview-modal.section-left');
|
|
const modalWrapper = document.querySelector('.overview-modal-wrapper');
|
|
|
|
modal.querySelector('.business-purpose').value = document.querySelector('.overview .box-body.business-purpose').innerText;
|
|
modal.querySelector('.performance-area').value = document.querySelector('.overview .box-body.location-map-detail .performance-area').innerText;
|
|
modal.querySelector('.reference-area').value = document.querySelector('.overview .box-body.location-map-detail .reference-area').innerText;
|
|
modal.querySelector('.facility-overview').value = document.querySelector('.overview .box-body.facility-size .facility-overview').innerText;
|
|
|
|
//overseas용 분기
|
|
if(!overviewVars.overseas){
|
|
modal.querySelector('.nation').value = document.querySelector('.overview .box-body.location-map-detail .nation-nm').innerText;
|
|
modal.querySelector('.continent').value = document.querySelector('.overview .box-body.location-map-detail .continent').innerText;
|
|
} else {
|
|
modal.querySelector('.nation').innerText = document.querySelector('.overview .box-body.location-map-detail .nation-nm').innerText;
|
|
modal.querySelector('.continent').innerText = document.querySelector('.overview .box-body.location-map-detail .continent').innerText;
|
|
}
|
|
|
|
|
|
overviewVarsInit();
|
|
|
|
if(overviewVars.filesNameArr.length > 0) displayFileName();
|
|
|
|
modal.querySelectorAll('input[type=file]').forEach(input => { input.value = ''; })
|
|
|
|
makeTabCell(overviewVars.originalSectionTabData);
|
|
|
|
// 토글 처리
|
|
if (modal.style.display === 'block') {
|
|
modal.style.display = 'none';
|
|
return;
|
|
}
|
|
modal.style.display = 'block';
|
|
modalWrapper.style.display = 'block';
|
|
});
|
|
|
|
// section-left 모달 시설규모 탭,셀 생성 함수
|
|
export function makeTabCell(data) {
|
|
const tabContainer = document.querySelector('.section-tabs');
|
|
const contentContainer = document.querySelector('.section-content');
|
|
|
|
// 가로 스크롤 이벤트
|
|
tabContainer.addEventListener('wheel', (e) => {
|
|
e.preventDefault();
|
|
tabContainer.scrollLeft += e.deltaY;
|
|
});
|
|
|
|
tabContainer.innerHTML = '';
|
|
contentContainer.innerHTML = '';
|
|
|
|
// 데이터 없을 때 기본값
|
|
if (Object.keys(data).length === 0) {
|
|
data = { '': [{ key: '', value: '', id: '' }] };
|
|
}
|
|
|
|
const titles = Object.keys(data);
|
|
titles.forEach((title, index) => {
|
|
const tab = createTab(title, index === 0);
|
|
bindTabEvents(tab, contentContainer);
|
|
tabContainer.appendChild(tab);
|
|
});
|
|
|
|
// 탭 추가 버튼
|
|
const addBtn = document.createElement('button');
|
|
addBtn.classList.add('xs-btn', 'add');
|
|
addBtn.innerHTML = `<img class="icon" src="/main/img/overview/icon-add.svg" alt="icon-add">`;
|
|
tabContainer.appendChild(addBtn);
|
|
|
|
addBtn.addEventListener('click', () => {
|
|
const newTab = createTab('', true);
|
|
bindTabEvents(newTab, contentContainer, true);
|
|
tabContainer.insertBefore(newTab, addBtn);
|
|
newTab.click();
|
|
});
|
|
|
|
// 첫번째 탭 클릭
|
|
if (titles.length > 0) {
|
|
tabContainer.querySelector('.tab')?.click();
|
|
}
|
|
}
|
|
|
|
// 탭 생성
|
|
function createTab(title, isActive) {
|
|
const tab = document.createElement('div');
|
|
tab.className = 'tab';
|
|
if (isActive) tab.classList.add('click-on');
|
|
|
|
const input = document.createElement('input');
|
|
input.className = 'tab-style-input';
|
|
input.type = 'text';
|
|
input.value = title;
|
|
input.placeholder = '탭 제목 입력';
|
|
|
|
const closeBtn = document.createElement('button');
|
|
closeBtn.className = 'xs-btn';
|
|
closeBtn.innerHTML = `<img class="icon" src="/main/img/overview/icon-close-111.svg">`;
|
|
|
|
tab.appendChild(input);
|
|
tab.appendChild(closeBtn);
|
|
|
|
return tab;
|
|
}
|
|
|
|
// 탭 클릭, 제목입력, 삭제버튼 이벤트
|
|
function bindTabEvents(tab, contentContainer, isNew = false) {
|
|
const input = tab.querySelector('input');
|
|
const closeBtn = tab.querySelector('button');
|
|
|
|
// 탭 클릭 이벤트
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.section-tabs .tab').forEach(t => t.classList.remove('click-on'));
|
|
tab.classList.add('click-on');
|
|
renderCells(input.value.trim(), contentContainer);
|
|
});
|
|
|
|
// 탭 제목 input 변경 이벤트
|
|
let previousSection = input.value.trim();
|
|
input.addEventListener('input', () => {
|
|
const section = String(input.value.trim());
|
|
// 탭 제목이 빈값 일때 삭제 처리
|
|
if (section === '') {
|
|
if (previousSection && overviewVars.sectionTabData[previousSection]) delete overviewVars.sectionTabData[previousSection];
|
|
showToolTip(input, '탭 제목이 없어 셀 내용이 초기화되었습니다.')
|
|
// 셀 초기화
|
|
document.querySelectorAll('.section-content .section-content--cell').forEach((cell, index) => {
|
|
if(index === 0){
|
|
cell.querySelectorAll('input').forEach(input => input.value = '');
|
|
} else{
|
|
// 셀 추가 버튼을 건너뜀
|
|
if(cell.className === 'section-content--cell add-cell-btn') return;
|
|
cell.remove();
|
|
}
|
|
});
|
|
previousSection = '';
|
|
return;
|
|
}
|
|
// 탭 제목이 같을때 처리 막기
|
|
if (section !== previousSection && overviewVars.sectionTabData[section]){
|
|
showToolTip(input, '이미 존재하는 탭 이름입니다. 다른 이름을 입력해주세요.')
|
|
input.value = previousSection;
|
|
return;
|
|
}
|
|
|
|
// 탭 이름이 변경될때
|
|
if (previousSection && previousSection !== section) {
|
|
if (overviewVars.sectionTabData[previousSection]) {
|
|
overviewVars.sectionTabData[section] = overviewVars.sectionTabData[previousSection];
|
|
delete overviewVars.sectionTabData[previousSection];
|
|
} else {
|
|
overviewVars.sectionTabData[section] = [];
|
|
}
|
|
} else if (!overviewVars.sectionTabData[section]) {
|
|
overviewVars.sectionTabData[section] = [];
|
|
}
|
|
|
|
previousSection = section;
|
|
});
|
|
|
|
// 탭 삭제 이벤트
|
|
closeBtn.addEventListener('click', async (e) => {
|
|
e.stopPropagation();
|
|
const title = input.value;
|
|
const tabLength = document.querySelectorAll('.section-tabs .tab').length;
|
|
const tabInput = document.querySelector('.section-tabs .tab input');
|
|
const cell = document.querySelectorAll('.section-content--cell input');
|
|
const emptyTab = !tabInput?.value.trim();
|
|
const emptyCell = Array.from(cell).every(input => !input.value.trim());
|
|
|
|
// 탭이 한 개 남았고 공백일 경우 삭제 막기
|
|
if (tabLength === 1 && emptyTab && emptyCell) return;
|
|
|
|
try {
|
|
if (tabLength === 1) {
|
|
delete overviewVars.sectionTabData[title];
|
|
document.querySelector('.section-tabs .tab input').value = '';
|
|
document.querySelectorAll('.section-content .section-content--cell').forEach((cell, index) => {
|
|
if(index === 0){
|
|
cell.querySelectorAll('input').forEach(input => input.value = '');
|
|
} else{
|
|
// 셀 추가 버튼을 건너뜀
|
|
if(cell.className === 'section-content--cell add-cell-btn') return;
|
|
cell.remove();
|
|
}
|
|
});
|
|
} else {
|
|
delete overviewVars.sectionTabData[title];
|
|
tab.remove();
|
|
const allTabs = document.querySelectorAll('.section-tabs .tab');
|
|
const lastTab = allTabs[allTabs.length - 1];
|
|
if (lastTab) lastTab.click();
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 셀 렌더딩
|
|
function renderCells(title, container) {
|
|
container.innerHTML = '';
|
|
let cells = overviewVars.sectionTabData[title] || [{ key: '', value: '', id: '' }];
|
|
// 타이틀만 있고 셀의 내용이 없을때 기본값 설정
|
|
if(cells.length === 0) cells = [{ key: '', value: '', id: '' }];
|
|
cells.forEach(cell => {
|
|
const row = createCell(cell);
|
|
bindCellEvents(row, title);
|
|
container.appendChild(row);
|
|
});
|
|
|
|
if (!container._hasInputEvent) {
|
|
container.addEventListener('input', (e) => {
|
|
if (!e.target.matches('input')) return;
|
|
|
|
const section = document.querySelector('.tab.click-on input').value.trim();
|
|
|
|
if (section === '') {
|
|
container.querySelectorAll('.section-content--cell input').forEach(cell => {
|
|
cell.value = ''
|
|
});
|
|
showToolTip(e.target, '탭의 제목을 먼저 입력해주세요')
|
|
return
|
|
}
|
|
|
|
const keyInputs = container.querySelectorAll('input.short-input');
|
|
const valueInputs = container.querySelectorAll('input.middle-input');
|
|
|
|
const keyValueList = [];
|
|
for (let i = 0; i < keyInputs.length; i++) {
|
|
const key = keyInputs[i].value;
|
|
const value = valueInputs[i] ? valueInputs[i].value : '';
|
|
const id = keyInputs[i].dataset.id ? parseInt(keyInputs[i].dataset.id) : null;
|
|
const projectId = vars.project_id;
|
|
keyValueList.push({ key, value, id, projectId });
|
|
}
|
|
|
|
overviewVars.sectionTabData[section] = keyValueList;
|
|
});
|
|
container._hasInputEvent = true;
|
|
}
|
|
|
|
// 셀 추가 버튼
|
|
const addCell = document.createElement('div');
|
|
addCell.className = 'section-content--cell add-cell-btn';
|
|
addCell.innerHTML = `
|
|
<img class="icon" src="/main/img/overview/icon-add-primary.svg" alt="icon-add-primary">
|
|
<h3>셀추가</h3>`;
|
|
addCell.addEventListener('click', () => {
|
|
const newCell = createCell({ key: '', value: '', id: null });
|
|
bindCellEvents(newCell, title);
|
|
container.insertBefore(newCell, addCell);
|
|
});
|
|
container.appendChild(addCell);
|
|
}
|
|
|
|
// 셀 생성
|
|
function createCell(cell) {
|
|
const row = document.createElement('div');
|
|
row.className = 'section-content--cell';
|
|
row.innerHTML = `
|
|
<input class="short-input" type="text" value="${cell.key ?? ''}" data-id="${cell.id ?? ''}" placeholder="셀 제목 입력">
|
|
<input class="middle-input" type="text" value="${cell.value ?? ''}" data-id="${cell.id ?? ''}" placeholder="셀 내용 입력">
|
|
`;
|
|
const btn = document.createElement('button');
|
|
btn.classList.add('xs-btn', 'cell-remove');
|
|
btn.innerHTML = `<img src="/main/img/overview/icon-close-111.svg">`;
|
|
row.appendChild(btn);
|
|
return row;
|
|
}
|
|
|
|
// 셀 삭제 버튼 이벤트 추가
|
|
function bindCellEvents(row, title) {
|
|
const btn = row.querySelector('.cell-remove');
|
|
const cellId = row.querySelector('input')?.dataset.id;
|
|
btn.addEventListener('click', async () => {
|
|
try {
|
|
// 기본생성된 셀 이벤트에서 title이 들어오지 않는 경우가 있어서 값을 직접 넣어줌
|
|
title = document.querySelector('.section-tabs .tab.click-on input').value;
|
|
const cells = document.querySelectorAll('.section-content--cell');
|
|
|
|
if (cellId) {
|
|
// DB 삭제 성공 시 sectionTabData 업데이트
|
|
const index = overviewVars.sectionTabData[title].findIndex(item => item.id == cellId);
|
|
if (index !== -1) overviewVars.sectionTabData[title].splice(index, 1);
|
|
} else {
|
|
// 탭 입력이 되지않고 sectionTabData에 data가 없을때 row 삭제처리
|
|
if(!overviewVars.sectionTabData[title]){
|
|
if(cells.length > 2){
|
|
return row.remove();
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
const index = overviewVars.sectionTabData[title].findIndex(item => item.key === row.querySelector('.short-input')?.value && item.value === row.querySelector('.middle-input')?.value);
|
|
if(index !== -1) overviewVars.sectionTabData[title].splice(index, 1);
|
|
}
|
|
|
|
// 셀이 하나뿐이면 value 초기화, 아니면 삭제
|
|
if (cells.length === 2) {
|
|
row.querySelectorAll('input').forEach(input => input.value = '');
|
|
} else {
|
|
row.remove();
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// Section-left 시설규모 모달 OPEN
|
|
document.querySelector('.overview .box-header--right.facility-size button')?.addEventListener('click', async () => {
|
|
const modalWrapper = document.querySelector('.overview-modal-wrapper');
|
|
const modal = document.querySelector('.overview-modal.facility-size');
|
|
|
|
//토글
|
|
if (modal.style.display === 'block') {
|
|
modal.style.display = 'none';
|
|
modalWrapper.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await axios.get(`/${vars.project_id}/overview/getFacilitySizeData`, { params: { projectId: vars.project_id } });
|
|
if (res.data.message === '200') {
|
|
const modalBody = modal.querySelector('.overview-modal-body');
|
|
modalBody.innerHTML = '';
|
|
|
|
const dataArr = res.data.data;
|
|
if (dataArr.length === 0) {
|
|
modalBody.innerHTML = `<img src="/main/img/overview/non-facilitySize-image.svg">`
|
|
}
|
|
|
|
let currentTitle = '';
|
|
|
|
for (let i = 0; i < dataArr.length; i++) {
|
|
if (dataArr[i].title !== currentTitle) {
|
|
currentTitle = dataArr[i].title;
|
|
|
|
const boxHeader = document.createElement('div');
|
|
boxHeader.className = 'box-header';
|
|
const h3 = document.createElement('h3');
|
|
h3.textContent = currentTitle;
|
|
boxHeader.appendChild(h3);
|
|
modalBody.appendChild(boxHeader);
|
|
|
|
}
|
|
|
|
const typeWrap = document.createElement('div');
|
|
typeWrap.className = 'type--wrap';
|
|
|
|
const left = document.createElement('div');
|
|
left.className = 'type--wrap-left';
|
|
const p = document.createElement('p');
|
|
p.textContent = dataArr[i].key;
|
|
left.appendChild(p);
|
|
|
|
const right = document.createElement('div');
|
|
right.className = 'type--wrap-right';
|
|
const h4 = document.createElement('h4');
|
|
h4.textContent = dataArr[i].value;
|
|
right.appendChild(h4);
|
|
|
|
typeWrap.appendChild(left);
|
|
typeWrap.appendChild(right);
|
|
|
|
modalBody.appendChild(typeWrap);
|
|
}
|
|
}
|
|
|
|
modal.style.display = 'block';
|
|
modalWrapper.style.display = 'block';
|
|
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
|
|
});
|
|
|
|
// section-left 위치도/개요도 이미지 저장
|
|
document.querySelector('.overview-modal.section-left .overview-img-file-input')?.addEventListener('change', () => {
|
|
const files = Array.from(document.querySelector('.overview-modal.section-left .overview-img-file-input').files);
|
|
|
|
// 중복 이름과 확장자 체크
|
|
checkDuplicatesFileNameAndExt(files);
|
|
// 등록된 파일의 이름을 추가
|
|
displayFileName();
|
|
|
|
// 초기화
|
|
document.querySelector('.overview-modal.section-left .overview-img-file-input').value = '';
|
|
});
|
|
|
|
// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Secion-Left 모달 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
|
|
|
|
//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Secion-Middle 모달 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
|
|
|
|
// section-middle 모달 열기
|
|
document.querySelector('.overview .box-header--right.section-middle-edit')?.addEventListener('click', () => {
|
|
const modal = document.querySelector('.overview-modal.section-middle');
|
|
const modalWrapper = document.querySelector('.overview-modal-wrapper');
|
|
|
|
modal.querySelector('.abbreviated-name').value = document.querySelector('.overview .abbreviated-name').innerText;
|
|
modal.querySelector('.task-nm-en').value = document.querySelector('.overview .task-nm-en').innerText;
|
|
modal.querySelector('.task-purpose').value = document.querySelector('.overview .task-purpose').innerText;
|
|
modal.querySelector('.order-size-usd').value = document.querySelector('.overview .order-size-usd').innerText;
|
|
modal.querySelector('.order-size-krw').value = document.querySelector('.overview .order-size-krw').innerText;
|
|
modal.querySelector('.client-origin').value = document.querySelector('.overview .client-origin').innerText;
|
|
modal.querySelector('.financial').value = document.querySelector('.financial').innerText;
|
|
modal.querySelector('.financial-country').value = document.querySelector('.overview .financial-country').innerText;
|
|
modal.querySelector('.selection-method').value = document.querySelector('.overview .selection-method').innerText;
|
|
modal.querySelector('.overview-table-container').innerHTML = document.querySelector('.overview .overview-table-container ').innerHTML;
|
|
modal.querySelector('.support-department').value = document.querySelector('.overview .support-department').innerText;
|
|
modal.querySelector('.support-manager-nm').value = document.querySelector('.overview .support-manager-nm').innerText;
|
|
modal.querySelector('.completion-date').value = document.querySelector('.overview .completion-date').innerText;
|
|
|
|
// overseas용 분기
|
|
if(!overviewVars.overseas){
|
|
modal.querySelector('.project-no').value = document.querySelector('.overview .project-no').innerText;
|
|
modal.querySelector('.task-type').value = document.querySelector('.overview .task-type').innerText;
|
|
modal.querySelector('.bid').value = document.querySelector('.overview .bid').innerText;
|
|
modal.querySelector('.client').value = document.querySelector('.overview .client').innerText;
|
|
modal.querySelector('.department').value = document.querySelector('.overview .department').innerText;
|
|
modal.querySelector('.currency-code').value = document.querySelector('.overview .currency-code').innerText;
|
|
modal.querySelector('.task-nm-kr').value = document.querySelector('.overview .task-nm-kr').innerText;
|
|
modal.querySelector('.contract-period').value = document.querySelector('.overview .contract-period').innerText;
|
|
modal.querySelector('.projectmanager-nm').value = document.querySelector('.overview .projectmanager-nm').innerText;
|
|
modal.querySelector('.manager-nm').value = document.querySelector('.overview .manager-nm').innerText;
|
|
modal.querySelector('.contract-date').value = document.querySelector('.overview .contract-date').innerText;
|
|
modal.querySelector('.commencement-date').value = document.querySelector('.overview .commencement-date').innerText;
|
|
modal.querySelector('.scheduled-completion-date').value = document.querySelector('.overview .scheduled-completion-date').innerText;
|
|
modal.querySelector('.scheuled-commencement-date').value = document.querySelector('.overview .scheuled-commencement-date').innerText;
|
|
|
|
modal.querySelectorAll('.joint-contract-company-name').forEach(company => { company.contentEditable = true; company.style.color = '#FF3D00'; })
|
|
// 공동도급 수정, 색상변화, 숫자 제한
|
|
modal.querySelectorAll('.joint-contract-company-shares, .joint-contract-krw, .joint-contract-usd').forEach(joint => {
|
|
joint.contentEditable = true;
|
|
joint.style.color = '#FF3D00';
|
|
joint.addEventListener('input', (event) => {
|
|
restrictToNumber(joint, event);
|
|
calculateTotalJointContract(joint);
|
|
});
|
|
});
|
|
} else {
|
|
modal.querySelector('.project-no').innerText = document.querySelector('.overview .project-no').innerText;
|
|
modal.querySelector('.task-type').innerText = document.querySelector('.overview .task-type').innerText;
|
|
modal.querySelector('.bid').innerText = document.querySelector('.overview .bid').innerText;
|
|
modal.querySelector('.client').innerText = document.querySelector('.overview .client').innerText;
|
|
modal.querySelector('.department').innerText = document.querySelector('.overview .department').innerText;
|
|
modal.querySelector('.currency-code').innerText = document.querySelector('.overview .currency-code').innerText;
|
|
modal.querySelector('.task-nm-kr').innerText = document.querySelector('.overview .task-nm-kr').innerText;
|
|
modal.querySelector('.contract-period').innerText = document.querySelector('.overview .contract-period').innerText;
|
|
modal.querySelector('.projectmanager-nm').innerText = document.querySelector('.overview .projectmanager-nm').innerText;
|
|
modal.querySelector('.manager-nm').innerText = document.querySelector('.overview .manager-nm').innerText;
|
|
modal.querySelector('.contract-date').innerText = document.querySelector('.overview .contract-date').innerText;
|
|
modal.querySelector('.commencement-date').innerText = document.querySelector('.overview .commencement-date').innerText;
|
|
modal.querySelector('.scheduled-completion-date').innerText = document.querySelector('.overview .scheduled-completion-date').innerText;
|
|
modal.querySelector('.scheuled-commencement-date').innerText = document.querySelector('.overview .scheuled-commencement-date').innerText;
|
|
}
|
|
|
|
const jointTable = modal.querySelector('.overview-table-container')
|
|
// 탭 컨테이너 가로스크롤 휠 이벤트 추가
|
|
jointTable.addEventListener('wheel', (e)=> {
|
|
e.preventDefault();
|
|
jointTable.scrollLeft += e.deltaY;
|
|
});
|
|
|
|
// 토글 처리
|
|
if (modal.style.display === 'block') {
|
|
modal.style.display = 'none';
|
|
return;
|
|
}
|
|
modal.style.display = 'block';
|
|
modalWrapper.style.display = 'block';
|
|
|
|
});
|
|
|
|
// section-middle 과업기간 모달 열기
|
|
document.querySelector('.overview .box-header--right.task-period')?.addEventListener('click', async () => {
|
|
const modal = document.querySelector('.overview-modal.task-period');
|
|
const modalWrapper = document.querySelector('.overview-modal-wrapper');
|
|
|
|
modal.querySelector('.contract-date').innerText = document.querySelector('.overview .contract-date').innerText;
|
|
modal.querySelector('.commencement-date').innerText = document.querySelector('.overview .commencement-date').innerText;
|
|
modal.querySelector('.scheduled-completion-date').innerText = document.querySelector('.overview .scheduled-completion-date').innerText;
|
|
modal.querySelector('.completion-date').innerText = document.querySelector('.overview .completion-date').innerText;
|
|
|
|
// 과업 중지 이력 생성
|
|
makeTaskHistory();
|
|
|
|
// 토글 처리
|
|
if (modal.style.display === 'block') {
|
|
modal.style.display = 'none';
|
|
return;
|
|
}
|
|
modal.style.display = 'block';
|
|
modalWrapper.style.display = 'block';
|
|
});
|
|
|
|
// section-middle 과업중지 이력 리스트 추가
|
|
document.querySelector('.overview-modal.task-period .box-header--right button')?.addEventListener('click', () => {
|
|
const ul = document.querySelector('.overview-modal.task-period .overview-modal-body ul');
|
|
const li = document.createElement('li');
|
|
|
|
// 차수
|
|
const numberDiv = document.createElement('div');
|
|
numberDiv.className = 'work-list-number';
|
|
const orderInput = document.createElement('input');
|
|
orderInput.type = 'text';
|
|
orderInput.className = 'order work-list-number';
|
|
|
|
numberDiv.appendChild(orderInput);
|
|
|
|
// 중지일자
|
|
const dateDiv = document.createElement('div');
|
|
dateDiv.className = 'work-list-date';
|
|
const dateInput = document.createElement('input');
|
|
dateInput.className = 'suspension-date work-list-date';
|
|
dateInput.type = 'date';
|
|
|
|
dateDiv.appendChild(dateInput);
|
|
|
|
// 중지사유
|
|
const reasonDiv = document.createElement('div');
|
|
reasonDiv.className = 'work-list-script';
|
|
const reasonInput = document.createElement('input');
|
|
reasonInput.className = 'suspension-reason work-list-script';
|
|
reasonInput.type = 'text';
|
|
|
|
reasonDiv.appendChild(reasonInput);
|
|
|
|
// 재개일자
|
|
const redateDiv = document.createElement('div');
|
|
redateDiv.className = 'work-list-redate';
|
|
const redateInput = document.createElement('input');
|
|
redateInput.className = 'resumption-date work-list-redate';
|
|
redateInput.type = 'date';
|
|
|
|
redateDiv.appendChild(redateInput);
|
|
|
|
// 협의내용
|
|
const detailDiv = document.createElement('div');
|
|
detailDiv.className = 'work-list-detail';
|
|
const consultInput = document.createElement('input');
|
|
consultInput.className = 'consuletation-content work-list-detail';
|
|
consultInput.type = 'text';
|
|
|
|
detailDiv.appendChild(consultInput);
|
|
|
|
// 변경 일자
|
|
const changeDiv = document.createElement('div');
|
|
changeDiv.className = 'work-list-changedate';
|
|
const changeInput = document.createElement('input');
|
|
changeInput.className = 'change-date work-list-changedate';
|
|
changeInput.type = 'date';
|
|
|
|
changeDiv.appendChild(changeInput);
|
|
|
|
|
|
const btn = document.createElement('button');
|
|
btn.className = 'xs-btn-type';
|
|
const img = document.createElement('img');
|
|
img.className = 'icon';
|
|
img.src = '/main/img/overview/icon-close-111.svg';
|
|
img.alt = 'icon-close-111';
|
|
btn.appendChild(img);
|
|
// 과업 중지이력 리스트 개별 삭제버튼
|
|
btn.addEventListener('click', async (e) => {
|
|
li.remove();
|
|
});
|
|
|
|
li.append(numberDiv, dateDiv, reasonDiv, redateDiv, detailDiv, changeDiv, btn);
|
|
|
|
ul.appendChild(li);
|
|
|
|
});
|
|
|
|
if(!overviewVars.overseas){
|
|
// section-middle 공동도급 열 추가
|
|
document.querySelector('.overview-modal.section-middle .joint-contract-add')?.addEventListener('click', () => {
|
|
const table = document.querySelector('.overview-modal.section-middle .overview-table-container table');
|
|
const headerRow = table.querySelector('thead tr');
|
|
const currentCols = headerRow.querySelectorAll('th').length;
|
|
|
|
// 총계와 주관사
|
|
const newIndex = currentCols - 1;
|
|
document.querySelector('.overview-modal .total-joint-contract-company-name').innerText = newIndex;
|
|
const newTh = document.createElement('th');
|
|
if (newIndex < 2) {
|
|
newTh.innerText = '주관사';
|
|
} else {
|
|
newTh.innerText = `공동도급${newIndex - 1}`;
|
|
}
|
|
headerRow.appendChild(newTh);
|
|
|
|
const tbodyRows = table.querySelectorAll('tbody tr');
|
|
|
|
const defaultValues = ['회사명', '0', '0', '0'];
|
|
const classList = ['joint-contract-company-name', 'joint-contract-company-shares', 'joint-contract-krw', 'joint-contract-usd'];
|
|
|
|
tbodyRows.forEach((row, idx) => {
|
|
const td = document.createElement('td');
|
|
td.className = classList[idx];
|
|
td.innerText = defaultValues[idx];
|
|
td.contentEditable = true;
|
|
td.style.color = '#FF3D00';
|
|
// 공동도급 숫자 제한
|
|
if (idx > 0) {
|
|
td.addEventListener('input', (event) => {
|
|
restrictToNumber(td, event);
|
|
calculateTotalJointContract(td);
|
|
});
|
|
}
|
|
row.appendChild(td);
|
|
});
|
|
});
|
|
|
|
// section-middle 공동도급 열 삭제
|
|
document.querySelector('.overview-modal.section-middle .joint-contract-delete')?.addEventListener('click', () => {
|
|
const table = document.querySelector('.overview-modal.section-middle .overview-table-container table');
|
|
const theadRow = table.querySelector('thead tr');
|
|
const ths = theadRow.querySelectorAll('th');
|
|
// 주관사까지 삭제했을때 계산할 값이 없으므로 초기화
|
|
if (ths.length === 3){
|
|
document.querySelector('.overview-modal .total-joint-contract-company-name').innerText = 0;
|
|
document.querySelectorAll('.overview-modal .total-joint-contract-company-shares, .overview-modal .total-joint-contract-krw, .overview-modal .total-joint-contract-usd').forEach(el => el.innerText = 0);
|
|
}
|
|
if (ths.length <= 2) {
|
|
alert("삭제할 수 있는 열이 없습니다.");
|
|
return;
|
|
}
|
|
|
|
// 마지막 th 삭제
|
|
theadRow.removeChild(ths[ths.length - 1]);
|
|
|
|
// tbody의 마지막 td 삭제
|
|
const tbodyRows = table.querySelectorAll('tbody tr');
|
|
tbodyRows.forEach(row => {
|
|
const tds = row.querySelectorAll('td');
|
|
if (tds.length > 2) {
|
|
row.removeChild(tds[tds.length - 1]);
|
|
}
|
|
});
|
|
// 삭제시에 총계 계산
|
|
document.querySelectorAll('.overview-modal.section-middle .overview-table-container td').forEach(td => {
|
|
calculateTotalJointContract(td);
|
|
});
|
|
|
|
// 총 회사 수 업데이트
|
|
document.querySelector('.overview-modal .total-joint-contract-company-name').innerText = ths.length - 3;
|
|
});
|
|
}
|
|
|
|
// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Secion-Middle 모달 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
|
|
|
|
//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Secion-Right 모달 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
|
|
|
|
// section-right 캘린더 주요일정 하루종일 버튼
|
|
document.querySelector('.overview-modal.schedule .custom-checkbox.all-day')?.addEventListener('change', () => {
|
|
const allDay = document.querySelector('.overview-modal.schedule .custom-checkbox.all-day input');
|
|
const startTime = document.querySelector('.overview-modal.schedule .startTime');
|
|
const endTime = document.querySelector('.overview-modal.schedule .endTime');
|
|
|
|
const isChecked = allDay.checked;
|
|
|
|
startTime.disabled = isChecked;
|
|
endTime.disabled = isChecked;
|
|
|
|
if (isChecked) {
|
|
startTime.value = '';
|
|
endTime.value = '';
|
|
} else {
|
|
startTime.value = '00:00';
|
|
endTime.value = '23:59';
|
|
}
|
|
|
|
});
|
|
|
|
// section-right 주요일정 Color 클릭 효과
|
|
document.querySelectorAll('.overview-modal .color .label-color')?.forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
document.querySelectorAll('.overview-modal .color .label-color').forEach(label => {
|
|
label.classList.remove('on');
|
|
});
|
|
e.target.classList.add('on');
|
|
});
|
|
});
|
|
|
|
|
|
// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Secion-Right 모달 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
|