1130 lines
49 KiB
JavaScript
1130 lines
49 KiB
JavaScript
import { vars } from '../archive/variable.js';
|
|
import { checkProjectInactive } from '../main.js';
|
|
import { getPresignedURL, generateDeleteImgUrl, uploadImgData, sliceDate, applyUtcOffsetTime, splitStr, formatHour, calculateRemPosition, setDefaultScheduleTime, changeColor, fillPartialBlock } from './overviewCommon.js';
|
|
import { overviewVars } from './overviewVariable.js';
|
|
|
|
//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Section-Left, Middle 페이지 랜더링 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
|
|
|
|
export async function drawList(data) {
|
|
if (checkProjectInactive()) return;
|
|
|
|
overviewVars.originalFilesArr = [];
|
|
overviewVars.originalFilesNameArr = [];
|
|
overviewVars.originalFilesSizeArr = [];
|
|
overviewVars.filesNameArr = [];
|
|
|
|
/* Section-Left 페이지 랜더링 */
|
|
// 사업목적
|
|
const businessPurposeBox = document.querySelector('.business-purpose');
|
|
businessPurposeBox.textContent = data[0]?.business_purpose;
|
|
businessPurposeBox.title = data[0]?.business_purpose;
|
|
|
|
// 위치도
|
|
const locationImgKey = JSON.parse(data[0]?.location_img || '[]');
|
|
const swiperUl = document.querySelector('.overview .swiper-wrapper');
|
|
if(locationImgKey.length > 0){
|
|
// 페이지 재랜더링용 초기화
|
|
overviewVars.filesNameArr.push(...locationImgKey);
|
|
vbSwiper.removeAllSlides();
|
|
swiperUl.innerHTML = '';
|
|
// swiper 동적 생성
|
|
for(let i = 0; overviewVars.filesNameArr.length > i; i++){
|
|
const li = document.createElement('li');
|
|
li.classList.add('swiper-slide');
|
|
li.dataset.save = true;
|
|
li.dataset.filepath = overviewVars.filesNameArr[i];
|
|
const img = document.createElement('img');
|
|
const { url } = await getPresignedURL(overviewVars.filesNameArr[i]);
|
|
img.src = url;
|
|
|
|
li.appendChild(img);
|
|
vbSwiper.appendSlide(li);
|
|
}
|
|
} else { // 기본 설정
|
|
swiperUl.innerHTML = '';
|
|
const li = document.createElement('li');
|
|
li.classList.add('swiper-slide');
|
|
const img = document.createElement('img');
|
|
img.src = '/main/img/overview/non-photo-overview.svg';
|
|
|
|
li.appendChild(img);
|
|
vbSwiper.appendSlide(li);
|
|
}
|
|
vbSwiper.update();
|
|
|
|
// 사진이 2장 이상일때 스와이퍼 루프옵션 활성화
|
|
if(locationImgKey.length > 1){
|
|
vbSwiper.params.loop = true;
|
|
vbSwiper.loopCreate();
|
|
vbSwiper.update();
|
|
} else { // 사진이 1장 이하일때는 스와이퍼 루프옵션 비활성화
|
|
vbSwiper.params.loop = false;
|
|
vbSwiper.loopDestroy();
|
|
vbSwiper.update();
|
|
}
|
|
|
|
// 대륙
|
|
const continentBox = document.querySelector('.continent');
|
|
continentBox.textContent = data[0]?.continent;
|
|
|
|
// 국가
|
|
const nationNmBox = document.querySelector('.nation-nm');
|
|
nationNmBox.textContent = data[0]?.nation_nm;
|
|
nationNmBox.dataset.iso = data[0]?.nation_code;
|
|
nationNmBox.dataset.utcOffset = data[0]?.nation_offset;
|
|
|
|
// 수행지역
|
|
const performanceAreaBox = document.querySelector('.performance-area');
|
|
performanceAreaBox.textContent = data[0]?.performance_area;
|
|
|
|
// 참고지역
|
|
const referenceAreaBox = document.querySelector('.reference-area');
|
|
referenceAreaBox.textContent = data[0]?.reference_area;
|
|
|
|
// 누적 중복을 위한 초기화
|
|
overviewVars.filesSizeArr = [];
|
|
// 파일 사이즈 DB default값 0일때 배열로 초기화
|
|
if(data[0]?.data_size === '0')data[0].data_size = '[0]';
|
|
const filesSize = JSON.parse(data[0]?.data_size || '[0]');
|
|
overviewVars.filesSizeArr.push(...filesSize);
|
|
|
|
/* 시설규모 */
|
|
// 개요
|
|
const facilityOverviewBox = document.querySelector('.facility-overview');
|
|
facilityOverviewBox.textContent = data[0]?.facility_size_overview;
|
|
facilityOverviewBox.title = data[0]?.facility_size_overview;
|
|
|
|
// 페이지 랜더링 이후에 원본배열을 복사
|
|
overviewVars.originalFilesNameArr = [...overviewVars.filesNameArr];
|
|
overviewVars.originalFilesSizeArr = [...overviewVars.filesSizeArr];
|
|
|
|
await makeFacilitySizeTable();
|
|
|
|
// 시설규모 횡스크롤
|
|
document.querySelector('.overview .scroll-box').addEventListener('wheel', (event) => {
|
|
event.preventDefault();
|
|
document.querySelector('.overview .scroll-box').scrollLeft += event.deltaY;
|
|
});
|
|
|
|
/* Section-Middle 페이지 랜더링 */
|
|
|
|
// 약칭
|
|
const abbreviatedNameBox = document.querySelector('.abbreviated-name');
|
|
abbreviatedNameBox.textContent = data[0]?.abbreviated_name;
|
|
|
|
// Project Code 프로젝트 코드
|
|
const projectNoBox = document.querySelector('.project-no');
|
|
projectNoBox.textContent = data[0]?.project_no;
|
|
|
|
// 과업명(국)
|
|
const taskNmKrBox = document.querySelector('.task-nm-kr');
|
|
taskNmKrBox.textContent = data[0]?.task_nm_kr;
|
|
|
|
// 과업명(영)
|
|
const taskNmEnBox = document.querySelector('.task-nm-en');
|
|
taskNmEnBox.textContent = data[0]?.task_nm_en;
|
|
|
|
// 과업목적
|
|
const taskPurposeBox = document.querySelector('.task-purpose');
|
|
taskPurposeBox.textContent = data[0]?.task_purpose;
|
|
|
|
// 과업종류
|
|
const taskTypeBox = document.querySelector('.task-type');
|
|
taskTypeBox.textContent = data[0]?.task_type;
|
|
|
|
// 외화구분코드
|
|
const currencyCode = document.querySelector('.currency-code');
|
|
currencyCode.textContent = data[0]?.currency_code ?? 'USD';
|
|
|
|
// 발주규모(USD)
|
|
const orderSizeUsdBox = document.querySelector('.order-size-usd');
|
|
orderSizeUsdBox.textContent = data[0]?.order_size_usd;
|
|
|
|
// 발주규모(USD)
|
|
const orderSizeKrwBox = document.querySelector('.order-size-krw');
|
|
orderSizeKrwBox.textContent = data[0]?.order_size_krw;
|
|
|
|
// 예정착공일과 착수일은 동일한 컬럼(tb_overview.commencement_date) 값을 사용
|
|
const scheuledCommencementDateBox = document.querySelector('.scheuled-commencement-date');
|
|
|
|
// 계약기간
|
|
const contractPeriodBox = document.querySelector('.contract-period');
|
|
|
|
// 발주처
|
|
const clientBox = document.querySelector('.client');
|
|
clientBox.textContent = data[0]?.client;
|
|
|
|
// 원발주처
|
|
const clientOriginBox = document.querySelector('.client-origin');
|
|
clientOriginBox.textContent = data[0]?.client_origin;
|
|
|
|
// 재원
|
|
const financialBox = document.querySelector('.financial');
|
|
financialBox.textContent = data[0]?.financial;
|
|
|
|
// 입찰방식
|
|
const bidBox = document.querySelector('.bid');
|
|
bidBox.textContent = data[0]?.bid;
|
|
|
|
// 재원국가
|
|
const financialCountryBox = document.querySelector('.financial-country');
|
|
financialCountryBox.textContent = data[0]?.financial_country;
|
|
|
|
// 선정방식
|
|
const selectionMethodBox = document.querySelector('.selection-method');
|
|
selectionMethodBox.textContent = data[0]?.selection_method;
|
|
|
|
/* 공동도급 */
|
|
await makeJointTable(data);
|
|
|
|
/* 과업기간 */
|
|
// 계약일
|
|
const contractDateBox = document.querySelector('.contract-date');
|
|
// 착수일
|
|
const commencementDateBox = document.querySelector('.commencement-date');
|
|
// 종료예정일
|
|
const changedCompletionDateBox = document.querySelector('.scheduled-completion-date');
|
|
|
|
// overseas용 분기
|
|
if(!overviewVars.overseas){
|
|
scheuledCommencementDateBox.textContent = data[0]?.scheuled_commencement_date;
|
|
contractPeriodBox.textContent = data[0]?.contract_period != null ? data[0]?.contract_period : '';
|
|
changedCompletionDateBox.textContent = data[0]?.original_completion_date;
|
|
commencementDateBox.textContent = data[0]?.commencement_date;
|
|
contractDateBox.textContent = data[0]?.contract_date;
|
|
} else{
|
|
scheuledCommencementDateBox.textContent = sliceDate(data[0]?.commencement_date);
|
|
changedCompletionDateBox.textContent = sliceDate(data[0]?.original_completion_date);
|
|
contractPeriodBox.textContent = data[0]?.contract_period != null ? data[0]?.contract_period + '개월' : '';
|
|
commencementDateBox.textContent = sliceDate(data[0]?.commencement_date);
|
|
contractDateBox.textContent = sliceDate(data[0]?.contract_date);
|
|
}
|
|
|
|
// 종료일
|
|
const completionDateBox = document.querySelector('.completion-date');
|
|
completionDateBox.textContent = data[0]?.completion_date;
|
|
|
|
|
|
/* 사내담당 */
|
|
// 담당부서
|
|
const departmentBox = document.querySelector('.department');
|
|
departmentBox.textContent = data[0]?.department;
|
|
|
|
// 책임자
|
|
const projectmanagerNmBox = document.querySelector('.projectmanager-nm');
|
|
projectmanagerNmBox.textContent = data[0]?.projectmanager_nm;
|
|
|
|
// 담당자
|
|
const managerNmBox = document.querySelector('.manager-nm');
|
|
managerNmBox.textContent = data[0]?.manager_nm;
|
|
|
|
// 지원부서
|
|
const supportDepartmentBox = document.querySelector('.support-department');
|
|
supportDepartmentBox.textContent = data[0]?.support_department;
|
|
|
|
// 담당자
|
|
const supportManagerNmBox = document.querySelector('.support-manager-nm');
|
|
supportManagerNmBox.textContent = data[0]?.support_manager_nm;
|
|
|
|
// 주요 현안 및 이슈
|
|
const Issue = document.querySelector('.overview .issue-content');
|
|
Issue.value = data[0]?.issue ?? '';
|
|
overviewVars.issueData = data[0]?.issue ?? '';
|
|
|
|
// overview-main 표시
|
|
document.querySelector('.overview-main').style.display = 'flex';
|
|
}
|
|
|
|
|
|
// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Section-Left, Middle 페이지 랜더링 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
|
|
|
|
//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Section-Left 페이지 랜더링 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
|
|
|
|
// 위치도 개요도 스와이퍼
|
|
export const vbSwiper = new Swiper('.vb-swiper .swiper', {
|
|
slidesPerView: 1,
|
|
spaceBetween: 0,
|
|
centeredSlides: true,
|
|
speed: 400,
|
|
loop: false,
|
|
navigation: {
|
|
nextEl: '.vb-swiper .swiper-button-next',
|
|
prevEl: '.vb-swiper .swiper-button-prev',
|
|
},
|
|
pagination: {
|
|
el: ".vb-swiper .swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
});
|
|
|
|
// 시설규모 일부 리스트 (4개)
|
|
async function makeFacilitySizeTable() {
|
|
try {
|
|
const res = await axios.get(`/${vars.project_id}/overview/getFacilitySizeData`, { params: { projectId: vars.project_id } });
|
|
if (res.data.message === '200') {
|
|
const scrollBox = document.querySelector('.overview .scroll-box.facility-size');
|
|
scrollBox.innerHTML = '';
|
|
const dataArr = res.data.data;
|
|
|
|
// 기존에 갖고있던 sectionTabData를 초기화
|
|
if(overviewVars.originalSectionTabData)overviewVars.originalSectionTabData = {};
|
|
|
|
|
|
// section-left 모달 열었을때 탭과 셀 그리기 위한 전역변수에 저장
|
|
dataArr.forEach(item => {
|
|
if (!overviewVars.originalSectionTabData[item.title]) {
|
|
overviewVars.originalSectionTabData[item.title] = [];
|
|
}
|
|
|
|
overviewVars.originalSectionTabData[item.title].push({
|
|
key: item.key,
|
|
value: item.value,
|
|
id: item.facility_id,
|
|
projectId: vars.project_id
|
|
});
|
|
});
|
|
|
|
overviewVars.sectionTabData = JSON.parse(JSON.stringify(overviewVars.originalSectionTabData));
|
|
|
|
let currentTitle = '';
|
|
let currentBoxBody = null;
|
|
let typeWrapCount = 0;
|
|
|
|
for (let i = 0; i < dataArr.length; i++) {
|
|
|
|
if (dataArr[i].title !== currentTitle) {
|
|
currentTitle = dataArr[i].title;
|
|
typeWrapCount = 0;
|
|
|
|
const sectionBox = document.createElement('div');
|
|
sectionBox.className = 'section-box';
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'section-box--header';
|
|
|
|
const h3 = document.createElement('h3');
|
|
h3.textContent = dataArr[i].title;
|
|
header.appendChild(h3);
|
|
|
|
currentBoxBody = document.createElement('div');
|
|
currentBoxBody.className = 'box-body';
|
|
|
|
sectionBox.appendChild(header);
|
|
sectionBox.appendChild(currentBoxBody);
|
|
scrollBox.appendChild(sectionBox);
|
|
}
|
|
|
|
if (typeWrapCount < 4) {
|
|
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);
|
|
|
|
currentBoxBody.appendChild(typeWrap);
|
|
|
|
typeWrapCount++;
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
|
|
}
|
|
// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 section-Left 페이지 랜더링 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
|
|
|
|
//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Section-Middle 페이지 랜더링 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
|
|
|
|
// 공동도급 표 만들기
|
|
function makeJointTable(data) {
|
|
// 회사명
|
|
const companyNames = splitStr(data[0]?.joint_contract_nm);
|
|
const companyLength = (companyNames?.length - 1) || 0;
|
|
|
|
// 지분율
|
|
const shares = splitStr(data[0]?.joint_contract_shareratio);
|
|
|
|
// 계약금(원)
|
|
const contract1 = splitStr(data[0]?.contract_amount);
|
|
|
|
// 계약금(달러)
|
|
const contract2 = splitStr(data[0]?.foreign_currency_amount);
|
|
|
|
for (let i = 0; i < companyLength; i++) {
|
|
overviewVars.companyArr.push({
|
|
companyNames: companyNames[i],
|
|
shares: shares[i],
|
|
contract1: contract1[i],
|
|
contract2: contract2[i]
|
|
});
|
|
}
|
|
|
|
overviewVars.companyArr.sort((a, b) => {
|
|
// 합계에 들어갈 공백이 최우선
|
|
if (a.companyNames === "" && b.companyNames !== "") return -1;
|
|
if (a.companyNames !== "" && b.companyNames === "") return 1;
|
|
|
|
// 대표사와 동일한게 제일 먼저 앞으로
|
|
if (a.companyNames === data[0]?.representative_company && b.companyNames !== data[0]?.representative_company) return -1;
|
|
if (a.companyNames !== data[0]?.representative_company && b.companyNames === data[0]?.representative_company) return 1;
|
|
|
|
// 대표사 다음으로 삼안이 오도록
|
|
if (a.companyNames === '삼안' && b.companyNames !== '삼안') return -1;
|
|
if (a.companyNames !== '삼안' && b.companyNames === '삼안') return 1;
|
|
|
|
|
|
// 그 다음에 자연수 정렬
|
|
let aNum = parseFloat(a.shares);
|
|
let bNum = parseFloat(b.shares);
|
|
|
|
return bNum - aNum;
|
|
});
|
|
|
|
|
|
|
|
let tableHTML = document.createElement('table');
|
|
|
|
// 테이블 헤드
|
|
let tableHead = document.createElement('thead');
|
|
const tableTr = document.createElement('tr');
|
|
const stickyTh = document.createElement('th');
|
|
stickyTh.classList.add('sticky');
|
|
|
|
const totalTh = document.createElement('th');
|
|
totalTh.innerText = '총계'
|
|
|
|
tableTr.appendChild(stickyTh);
|
|
tableTr.appendChild(totalTh);
|
|
|
|
if (companyLength > 0) {
|
|
const subjectMatterTh = document.createElement('th');
|
|
subjectMatterTh.innerText = '주관사';
|
|
tableTr.appendChild(subjectMatterTh);
|
|
}
|
|
|
|
for (let i = 1; companyLength > i; i++) {
|
|
const tableTh = document.createElement('th');
|
|
tableTh.innerText = `공동도급${i}`;
|
|
tableTr.appendChild(tableTh);
|
|
}
|
|
|
|
|
|
tableHead.appendChild(tableTr);
|
|
|
|
tableHTML.appendChild(tableHead);
|
|
|
|
// 회사명
|
|
let companyRow = document.createElement('tr');
|
|
companyRow.innerHTML = `<td class="sticky">회사명</td><td class="total-joint-contract-company-name">${companyLength}</td>`;
|
|
overviewVars.companyArr.forEach((company) => {
|
|
if (company.companyNames) {
|
|
let td = document.createElement('td');
|
|
td.textContent = company.companyNames;
|
|
if (company.companyNames === '삼안') {
|
|
td.style.color = '#111';
|
|
td.style.fontWeight = '700';
|
|
};
|
|
td.classList.add('joint-contract-company-name');
|
|
companyRow.appendChild(td);
|
|
}
|
|
});
|
|
tableHTML.appendChild(companyRow);
|
|
|
|
// 지분율
|
|
let shareRow = document.createElement('tr');
|
|
shareRow.innerHTML += `<td class="sticky">지분율(%)</td><td class="total-joint-contract-company-shares"></td>`;
|
|
let totalShares = 0;
|
|
overviewVars.companyArr.forEach((share) => {
|
|
if (share.shares) {
|
|
let td = document.createElement('td');
|
|
td.textContent = share.shares;
|
|
if (share.companyNames === '삼안') {
|
|
td.style.color = '#111';
|
|
td.style.fontWeight = '700';
|
|
};
|
|
if (!isNaN(share.shares)) totalShares += parseFloat(share.shares);
|
|
td.classList.add('joint-contract-company-shares');
|
|
shareRow.appendChild(td);
|
|
}
|
|
});
|
|
shareRow.children[1].innerText = totalShares;
|
|
tableHTML.appendChild(shareRow);
|
|
|
|
// 계약금(원)
|
|
let contractRow1 = document.createElement('tr');
|
|
contractRow1.innerHTML += `<td class="sticky">계약금(KRW)</td><td class="total-joint-contract-krw"></td>`;
|
|
let totalContract1 = 0;
|
|
overviewVars.companyArr.forEach((amount) => {
|
|
// 회사가 삼안일 때 강조처리
|
|
if (amount.contract1) {
|
|
let td = document.createElement('td');
|
|
if (amount.companyNames === '삼안') {
|
|
td.style.color = '#111';
|
|
td.style.fontWeight = '700';
|
|
};
|
|
td.textContent = parseFloat(amount.contract1).toLocaleString();
|
|
if (!isNaN(amount.contract1)) totalContract1 += parseFloat(amount.contract1);
|
|
td.classList.add('joint-contract-krw');
|
|
contractRow1.appendChild(td);
|
|
}
|
|
});
|
|
contractRow1.children[1].innerText = totalContract1.toLocaleString();
|
|
tableHTML.appendChild(contractRow1);
|
|
|
|
// 계약금(외화)
|
|
let contractRow2 = document.createElement('tr');
|
|
contractRow2.innerHTML += `<td class="sticky">계약금(${data[0]?.currency_code ?? 'USD'})</td><td class="total-joint-contract-usd"></td>`;
|
|
let totalContract2 = 0;
|
|
overviewVars.companyArr.forEach((amount) => {
|
|
if (amount.contract2) {
|
|
let td = document.createElement('td');
|
|
if (amount.companyNames === '삼안') {
|
|
td.style.color = '#111';
|
|
td.style.fontWeight = '700';
|
|
};
|
|
td.textContent = parseFloat(amount.contract2).toLocaleString();
|
|
if (!isNaN(amount.contract2)) totalContract2 += parseFloat(amount.contract2);
|
|
td.classList.add('joint-contract-usd');
|
|
contractRow2.appendChild(td);
|
|
}
|
|
});
|
|
contractRow2.children[1].innerText = totalContract2.toLocaleString();
|
|
tableHTML.appendChild(contractRow2);
|
|
|
|
const container = document.querySelector('#overview-table-container');
|
|
container.innerHTML = '';
|
|
container.appendChild(tableHTML);
|
|
container.addEventListener('wheel', (event) => {
|
|
event.preventDefault();
|
|
container.scrollLeft += event.deltaY;
|
|
});
|
|
|
|
// 공동도급 중복생성 방지를 위한 초기화
|
|
overviewVars.companyArr = [];
|
|
}
|
|
|
|
// 과업중지 이력 리스트 생성
|
|
export async function makeTaskHistory() {
|
|
const res = await axios.get(`/${vars.project_id}/overview/getTaskPeriodData`, { params: { projectId: vars.project_id } })
|
|
try {
|
|
if (res.data.message === '200') {
|
|
document.querySelector('.overview-modal.task-period .overview-modal-body ul').innerHTML = '';
|
|
|
|
const ul = document.querySelector('.overview-modal.task-period .overview-modal-body ul');
|
|
|
|
res.data.data.forEach(item => {
|
|
const li = document.createElement('li');
|
|
|
|
// 차수
|
|
const numberDiv = document.createElement('div');
|
|
numberDiv.className = 'work-list-number';
|
|
const orderH4 = document.createElement('h4');
|
|
orderH4.className = 'order';
|
|
orderH4.textContent = item.task_order;
|
|
numberDiv.appendChild(orderH4);
|
|
|
|
// 중지일자
|
|
const dateDiv = document.createElement('div');
|
|
dateDiv.className = 'work-list-date';
|
|
const dateH4 = document.createElement('h4');
|
|
dateH4.className = 'suspension-date';
|
|
dateH4.textContent = item.suspension_date;
|
|
dateDiv.appendChild(dateH4);
|
|
|
|
// 중지사유
|
|
const reasonDiv = document.createElement('div');
|
|
reasonDiv.className = 'work-list-script';
|
|
const reasonH4 = document.createElement('h4');
|
|
reasonH4.className = 'suspension-reason';
|
|
reasonH4.textContent = item.suspension_reason;
|
|
reasonH4.title = item.suspension_reason;
|
|
reasonDiv.appendChild(reasonH4);
|
|
|
|
// 재개일자
|
|
const redateDiv = document.createElement('div');
|
|
redateDiv.className = 'work-list-redate';
|
|
const redateH4 = document.createElement('h4');
|
|
redateH4.className = 'resumption-date';
|
|
redateH4.textContent = item.resumption_date;
|
|
redateDiv.appendChild(redateH4);
|
|
|
|
// 협의내용
|
|
const detailDiv = document.createElement('div');
|
|
detailDiv.className = 'work-list-detail';
|
|
const consultH4 = document.createElement('h4');
|
|
consultH4.className = 'consuletation-content';
|
|
consultH4.textContent = item.consultation_content;
|
|
consultH4.title = item.consultation_content;
|
|
detailDiv.appendChild(consultH4);
|
|
|
|
// 변경 일자
|
|
const changeDiv = document.createElement('div');
|
|
changeDiv.className = 'work-list-changedate';
|
|
const changeH4 = document.createElement('h4');
|
|
changeH4.className = 'change-date';
|
|
changeH4.textContent = item.change_date;
|
|
changeDiv.appendChild(changeH4);
|
|
|
|
// 과업 중지이력 리스트 개별 삭제버튼
|
|
const btn = document.createElement('button');
|
|
btn.className = 'xs-btn-type';
|
|
btn.setAttribute('data-id', item.task_history_id);
|
|
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) => {
|
|
overviewVars.deleteTaskHistory.push(e.target.getAttribute('data-id'))
|
|
li.remove();
|
|
|
|
});
|
|
|
|
li.append(numberDiv, dateDiv, reasonDiv, redateDiv, detailDiv, changeDiv, btn);
|
|
|
|
if(!vars.permission.checkPermission('overview-task-history-delete')) btn.remove();
|
|
|
|
ul.appendChild(li);
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
|
|
}
|
|
|
|
// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Section-Middle 페이지 랜더링 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
|
|
|
|
//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Section-Right 페이지 랜더링 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
|
|
|
|
// 달력 생성 함수
|
|
export async function generateCalendar(year, month) {
|
|
const calendarContainer = document.getElementById('calendar');
|
|
const monthNames = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
|
|
//html에서 생성
|
|
const nextMonthBtn = document.querySelector('.overview .calendar-btn.next-month');
|
|
const prevMonthBtn = document.querySelector('.overview .calendar-btn.prev-month');
|
|
const addScheduleBtn = document.querySelector('.overview .calendar .add-schedule-btn');
|
|
|
|
// 이벤트 바인딩을 한번만 하기위해 dataset을 사용
|
|
if(nextMonthBtn && !nextMonthBtn.dataset.event){
|
|
nextMonthBtn.addEventListener('click', () => {
|
|
overviewVars.currentMonth++;
|
|
if (overviewVars.currentMonth > 11) {
|
|
overviewVars.currentMonth = 0;
|
|
overviewVars.currentYear++;
|
|
}
|
|
generateCalendar(overviewVars.currentYear, overviewVars.currentMonth);
|
|
});
|
|
nextMonthBtn.dataset.event = 'true';
|
|
}
|
|
|
|
if(prevMonthBtn && !prevMonthBtn.dataset.event){
|
|
prevMonthBtn.addEventListener('click', () => {
|
|
overviewVars.currentMonth--;
|
|
if (overviewVars.currentMonth < 0) {
|
|
overviewVars.currentMonth = 11;
|
|
overviewVars.currentYear--;
|
|
}
|
|
generateCalendar(overviewVars.currentYear, overviewVars.currentMonth);
|
|
});
|
|
prevMonthBtn.dataset.event = 'true';
|
|
}
|
|
|
|
if(addScheduleBtn && !addScheduleBtn.dataset.event){
|
|
addScheduleBtn.addEventListener('click', () => {
|
|
const modal = document.querySelector('.overview-modal.schedule');
|
|
const modalWrapper = document.querySelector('.overview-modal-wrapper');
|
|
|
|
// 주요일정 모달 초기화
|
|
modal.querySelector('.schedule-title').value = '';
|
|
modal.querySelector('.schedule-content').value = '';
|
|
modal.querySelectorAll('input[type=radio][name=country]').forEach(country => {
|
|
if(country.value === '대한민국'){
|
|
country.checked = true;
|
|
} else {
|
|
country.checked = false;
|
|
}
|
|
});
|
|
modal.querySelector('.custom-checkbox.all-day input').checked = false;
|
|
modal.querySelector('.schedule-delete.btn-delete').style.display = 'none';
|
|
modal.querySelectorAll('.color .label-color').forEach(label => {
|
|
label.classList.remove('on');
|
|
});
|
|
modal.querySelector('.color .label-color').classList.add('on');
|
|
|
|
if (modal.style.display === 'block') {
|
|
modal.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
if (modal.dataset.scheduleId) {
|
|
delete modal.dataset.scheduleId;
|
|
}
|
|
|
|
setDefaultScheduleTime();
|
|
modal.style.display = 'block';
|
|
modalWrapper.style.display = 'block';
|
|
|
|
});
|
|
addScheduleBtn.dataset.event = 'true';
|
|
}
|
|
|
|
const monthHeader = document.querySelector('.overview .month-header');
|
|
if (monthHeader) monthHeader.innerText = `${year}년 ${monthNames[month]}`;
|
|
|
|
// 요일 생성
|
|
const existDaysOfWeek = document.querySelector('.overview .days-of-week');
|
|
if (!existDaysOfWeek) {
|
|
const daysOfWeek = document.createElement('div');
|
|
daysOfWeek.classList.add('days-of-week');
|
|
const weekdays = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
|
|
weekdays.forEach((day, index) => {
|
|
const dayElement = document.createElement('div');
|
|
dayElement.classList.add('days-of-week-day');
|
|
dayElement.innerText = day;
|
|
if (index === 0) dayElement.classList.add('sunday');
|
|
daysOfWeek.appendChild(dayElement);
|
|
});
|
|
calendarContainer.appendChild(daysOfWeek);
|
|
}
|
|
|
|
const existDays = document.querySelector('.overview .days');
|
|
// days가 이미 있다면 삭제하고 재생성
|
|
if (existDays) existDays.remove();
|
|
|
|
const daysContainer = document.createElement('div');
|
|
daysContainer.classList.add('days');
|
|
|
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
const firstDay = new Date(year, month).getDay();
|
|
|
|
for (let i = 0; i < firstDay; i++) {
|
|
const emptyDay = document.createElement('div');
|
|
emptyDay.classList.add('day', 'empty');
|
|
daysContainer.appendChild(emptyDay);
|
|
}
|
|
|
|
for (let i = 1; i <= daysInMonth; i++) {
|
|
const day = document.createElement('div');
|
|
day.classList.add('day');
|
|
const mm = (month + 1).toString().padStart(2, '0');
|
|
const dd = i.toString().padStart(2, '0');
|
|
day.dataset.date = `${year}-${mm}-${dd}`;
|
|
|
|
const dayOfWeek = new Date(year, month, i).getDay();
|
|
if (dayOfWeek === 0) day.classList.add('sunday');
|
|
if (dayOfWeek === 6) day.classList.add('saturday');
|
|
|
|
// 당일 조건
|
|
if (year === new Date().getFullYear() && month === new Date().getMonth() && i === new Date().getDate())day.classList.add('today');
|
|
|
|
day.innerHTML = `<div class="day-today">${i}</div>`;
|
|
daysContainer.appendChild(day);
|
|
}
|
|
|
|
calendarContainer.appendChild(daysContainer);
|
|
|
|
// 공휴일, 일정로드
|
|
getCalendarEventData(overviewVars.currentYear, overviewVars.currentMonth);
|
|
}
|
|
|
|
// 쿼리문 한번으로 holiday와 일정을 가져와 일정표에 표시한다.
|
|
async function getCalendarEventData(currentYear, currentMonth) {
|
|
let nationName = document.querySelector('.overview .nation-nm').innerText;
|
|
let nationCode = document.querySelector('.overview .nation-nm').dataset.iso.toLowerCase();
|
|
try {
|
|
const res = await axios.get(`/${vars.project_id}/overview/getCalendarEventData`, { params: { nationName: nationName, projectId: vars.project_id, currentYear: overviewVars.currentYear, currentMonth: overviewVars.currentMonth + 1 } })
|
|
// 데이터를 가져온 이후 type에 따라서 분기를 나눈다 type : holiday / type : schedule
|
|
if (res.data.message === '200') {
|
|
|
|
const calendarEvent = res.data.data;
|
|
|
|
calendarEvent.sort((a, b) => {
|
|
// 휴일 일정을 앞으로
|
|
if (a.type === 'holiday' && b.type !== 'holiday') return -1;
|
|
if (a.type !== 'holiday' && b.type === 'holiday') return 1;
|
|
|
|
// 연속일정 판별
|
|
const aDate = a.start_date !== a.end_date;
|
|
const bDate = b.start_date !== b.end_date;
|
|
if (aDate && !bDate) return -1;
|
|
if (!aDate && bDate) return 1;
|
|
|
|
// 연속일정별로 기간의 길이 판별
|
|
const aPeriod = new Date(a.end_date) - new Date(a.start_date);
|
|
const bPeriod = new Date(b.end_date) - new Date(b.start_date);
|
|
if (aPeriod > bPeriod) return -1;
|
|
if (aPeriod < bPeriod) return 1;
|
|
|
|
return 0;
|
|
});
|
|
|
|
calendarEvent.forEach(event => {
|
|
if (event.type === 'holiday') {
|
|
const holidayDate = event.start_date;
|
|
const holidayTitle = event.title;
|
|
const country = event.nation_nm;
|
|
|
|
const dayEl = document.querySelector(`.day[data-date="${holidayDate}"]`);
|
|
if (dayEl) {
|
|
if (dayEl.dataset.date === holidayDate && country == '한국') {
|
|
if (dayEl.classList.contains('saturday')) dayEl.classList.remove('saturday');
|
|
dayEl.classList.add('sunday');
|
|
const holidayDiv = document.createElement('div');
|
|
holidayDiv.classList.add('holiday');
|
|
|
|
const holidayImg = document.createElement('img');
|
|
holidayImg.src = `https://flagcdn.com/kr.svg`;
|
|
holidayDiv.appendChild(holidayImg);
|
|
|
|
const holidayText = document.createElement('p');
|
|
holidayText.textContent = holidayTitle;
|
|
holidayText.title = holidayTitle;
|
|
holidayText.style.color = '#1F7C5D';
|
|
|
|
holidayDiv.appendChild(holidayText);
|
|
|
|
dayEl.appendChild(holidayDiv);
|
|
} else {
|
|
if (dayEl.classList.contains('saturday')) dayEl.classList.remove('saturday');
|
|
dayEl.classList.add('sunday');
|
|
const holidayDiv = document.createElement('div');
|
|
holidayDiv.classList.add('holiday');
|
|
|
|
const holidayImg = document.createElement('img');
|
|
holidayImg.src = `https://flagcdn.com/${nationCode}.svg`;
|
|
holidayDiv.appendChild(holidayImg);
|
|
|
|
const holidayText = document.createElement('p');
|
|
holidayText.textContent = holidayTitle;
|
|
holidayText.title = holidayTitle;
|
|
holidayText.style.color = '#FF3D00';
|
|
|
|
holidayDiv.appendChild(holidayText);
|
|
|
|
dayEl.appendChild(holidayDiv);
|
|
}
|
|
}
|
|
} else if (event.type === 'schedule') {
|
|
const startDateStr = event.start_date.split('T')[0];
|
|
const endDateStr = event.end_date.split('T')[0];
|
|
|
|
const startDate = new Date(startDateStr);
|
|
const endDate = new Date(endDateStr);
|
|
|
|
let currentDate = new Date(startDate);
|
|
|
|
while (currentDate <= endDate) {
|
|
const dateStr = currentDate.toISOString().split('T')[0];
|
|
|
|
const dayEl = document.querySelector(`.day[data-date="${dateStr}"]`);
|
|
const holidayEl = document.querySelector(`.day[data-date="${dateStr}"] .holiday`);
|
|
if (dayEl) {
|
|
// 기존 배열 초기화 및 누적
|
|
if (!dayEl.dataset.schedules) dayEl.dataset.schedules = JSON.stringify([]);
|
|
const schedules = JSON.parse(dayEl.dataset.schedules);
|
|
schedules.push(event);
|
|
dayEl.dataset.schedules = JSON.stringify(schedules);
|
|
|
|
const scheduleDiv = document.createElement('div');
|
|
scheduleDiv.classList.add('schedule');
|
|
|
|
const scheduleTimeDiv = document.createElement('div');
|
|
scheduleTimeDiv.classList.add('time');
|
|
|
|
const scheduleTitleDiv = document.createElement('div');
|
|
scheduleTitleDiv.classList.add('title');
|
|
scheduleTitleDiv.style.color = '#000';
|
|
// 단일 일정
|
|
if (dateStr === startDateStr) {
|
|
scheduleTitleDiv.innerText = event.title;
|
|
// 연속 일정
|
|
if (startDateStr !== endDateStr) {
|
|
const dataColor = changeColor(event.color)
|
|
scheduleDiv.style.backgroundColor = dataColor;
|
|
scheduleDiv.classList.add('start_date', 'continuous');
|
|
}
|
|
// 일정 마지막
|
|
} else if (dateStr === endDateStr) {
|
|
const dataColor = changeColor(event.color)
|
|
scheduleDiv.style.backgroundColor = dataColor;
|
|
scheduleDiv.classList.add('end_date', 'continuous');
|
|
// 일정 중간
|
|
} else {
|
|
const dataColor = changeColor(event.color)
|
|
scheduleDiv.style.backgroundColor = dataColor;
|
|
scheduleDiv.classList.add('continuous');
|
|
}
|
|
|
|
if (dateStr === startDateStr) {
|
|
scheduleTitleDiv.innerText = event.title;
|
|
}
|
|
|
|
const scheduleColorDiv = document.createElement('div');
|
|
scheduleColorDiv.classList.add('color');
|
|
if (dateStr === startDateStr) {
|
|
if (startDateStr === endDateStr) {
|
|
scheduleColorDiv.innerText = '⦁';
|
|
} else {
|
|
scheduleColorDiv.innerHTML = ' ';
|
|
}
|
|
scheduleColorDiv.style.color = event.color;
|
|
} else {
|
|
scheduleColorDiv.innerHTML = ' ';
|
|
}
|
|
|
|
scheduleDiv.append(scheduleColorDiv, scheduleTitleDiv, scheduleTimeDiv);
|
|
|
|
const existinSchedules = dayEl.querySelectorAll('.schedule').length;
|
|
// 일정 최대 두개까지만 생성
|
|
if (existinSchedules < 2) {
|
|
// 공휴일 일정과 연속일정일때 공휴일 일정 앞으로 연속일정 생성
|
|
if (holidayEl && scheduleDiv.classList.contains('continuous')) {
|
|
dayEl.insertBefore(scheduleDiv, holidayEl);
|
|
} else {
|
|
dayEl.appendChild(scheduleDiv);
|
|
}
|
|
}
|
|
}
|
|
currentDate.setDate(currentDate.getDate() + 1);
|
|
}
|
|
// 일정 3개 이후로는 개수 표시
|
|
document.querySelectorAll('.day[data-schedules]').forEach(dayEl => {
|
|
const schedules = JSON.parse(dayEl.dataset.schedules);
|
|
|
|
// 이미 추가된 경우 삭제
|
|
if (dayEl.querySelector('.remain-schedules')) dayEl.querySelector('.remain-schedules').remove();
|
|
|
|
if (schedules.length > 2) {
|
|
const remainDiv = document.createElement('p');
|
|
remainDiv.innerText = `및 ${schedules.length - 2}개...`;
|
|
remainDiv.classList.add('remain-schedules');
|
|
dayEl.appendChild(remainDiv);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
// 일정 리스트 모달
|
|
document.querySelectorAll('.overview .days .day[data-schedules]').forEach(schedule => {
|
|
const schedules = JSON.parse(schedule.dataset.schedules);
|
|
schedule.addEventListener('click', () => {
|
|
const modal = document.querySelector('.overview-modal');
|
|
const modalWrapper = document.querySelector('.overview-modal-wrapper');
|
|
|
|
if (modal.style.display === 'block') {
|
|
modal.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
const modalBody = modal.querySelector('.overview-modal-body');
|
|
modalBody.innerHTML = '';
|
|
|
|
schedules.forEach(schedule => {
|
|
const scheduleStartDate = schedule.start_date.split('T')[0];
|
|
const scheduleStartTime = schedule.start_date.split('T')[1];
|
|
const scheduleEndDate = schedule.end_date.split('T')[0];
|
|
const scheduleEndTime = schedule.end_date.split('T')[1];
|
|
|
|
const scheduleDiv = document.createElement('div');
|
|
scheduleDiv.classList.add('calendar-list');
|
|
|
|
const scheduleWrap = document.createElement('div');
|
|
|
|
const subDiv = document.createElement('div');
|
|
subDiv.className = 'schedule-title';
|
|
scheduleWrap.appendChild(subDiv);
|
|
|
|
const scheduleColor = document.createElement('div');
|
|
scheduleColor.innerText = '⦁'
|
|
scheduleColor.style.color = schedule.color;
|
|
subDiv.appendChild(scheduleColor);
|
|
|
|
const scheduleTitle = document.createElement('h3');
|
|
scheduleTitle.textContent = schedule.title;
|
|
subDiv.appendChild(scheduleTitle);
|
|
|
|
const scheduleContent = document.createElement('h6');
|
|
scheduleContent.textContent = schedule.content;
|
|
scheduleWrap.appendChild(scheduleContent);
|
|
|
|
const scheduleTime = document.createElement('p');
|
|
if (scheduleStartTime != '' && scheduleEndTime != '') {
|
|
scheduleTime.textContent = `${scheduleStartDate} ${scheduleStartTime} ~ ${scheduleEndDate} ${scheduleEndTime}`
|
|
} else {
|
|
scheduleTime.textContent = '하루종일'
|
|
scheduleTime.style.color = '#FF3D00';
|
|
}
|
|
|
|
scheduleWrap.appendChild(scheduleTime);
|
|
const editbtn = document.createElement('button');
|
|
editbtn.className = 'xs-btn-type-icon';
|
|
editbtn.innerHTML = '<h6>편집</h6>';
|
|
|
|
scheduleDiv.appendChild(scheduleWrap);
|
|
scheduleDiv.appendChild(editbtn)
|
|
|
|
modalBody.appendChild(scheduleDiv);
|
|
// 이벤트 편집 페이지
|
|
editbtn.addEventListener('click', () => {
|
|
document.querySelector('.overview-modal.schedule-list').style.display = 'none';
|
|
|
|
const modal = document.querySelector('.overview-modal.schedule');
|
|
const modalWrapper = document.querySelector('.overview-modal-wrapper');
|
|
|
|
if (modal.style.display === 'block') {
|
|
modal.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
if(scheduleStartTime === '' && scheduleEndTime === ''){
|
|
modal.querySelector('.all-day input').checked = true;
|
|
modal.querySelector('.startTime').disabled = true;
|
|
modal.querySelector('.endTime').disabled = true;
|
|
}
|
|
|
|
modal.querySelector('.schedule-title').value = schedule.title;
|
|
modal.querySelector('.schedule-content').value = schedule.content;
|
|
modal.querySelectorAll('.color .label-color').forEach(btn => {
|
|
btn.classList.remove('on');
|
|
});
|
|
|
|
if (modal.querySelector(`.color .label-color[data-color="${schedule.color}"]`)) {
|
|
modal.querySelector(`.color .label-color[data-color="${schedule.color}"]`).classList.add('on');
|
|
}
|
|
modal.querySelector('.startDate').value = scheduleStartDate;
|
|
modal.querySelector('.startTime').value = scheduleStartTime;
|
|
modal.querySelector('.endDate').value = scheduleEndDate;
|
|
modal.querySelector('.endTime').value = scheduleEndTime;
|
|
modal.dataset.scheduleId = schedule.calendar_event_id;
|
|
|
|
if (modal.querySelector(`input[type="radio"][name="country"][value="${schedule.nation_nm}"]`)) {
|
|
modal.querySelector(`input[type="radio"][name="country"][value="${schedule.nation_nm}"]`).checked = true;
|
|
};
|
|
|
|
modal.querySelector('.schedule-delete').style.display = 'flex';
|
|
modal.style.display = 'block';
|
|
modalWrapper.style.display = 'block';
|
|
});
|
|
// 권한 이하일땐 편집버튼 삭제
|
|
if(!vars.permission.checkPermission('overview-schedule-edit')) editbtn.remove();
|
|
});
|
|
|
|
modal.style.display = 'block';
|
|
modalWrapper.style.display = 'block';
|
|
|
|
});
|
|
})
|
|
}
|
|
} catch {
|
|
|
|
}
|
|
}
|
|
|
|
export function startTimer(nation) {
|
|
// nation의 값이 없거나 대한민국 일때 교류시간 활성화 x
|
|
if (nation === '대한민국' || nation === '' || nation === 'ㅡ') {
|
|
document.querySelector('.overview .overview-box-3 .box.exchange-time').style.display = 'none';
|
|
return;
|
|
} else {
|
|
// 초기 로드 이후 남은 시간 계산해서 setTimeOut 이후에 setInterval로 1분에 한번씩 동작
|
|
updateTimeBar();
|
|
const currentTime = new Date();
|
|
const remainingSecond = 60 - currentTime.getSeconds();
|
|
|
|
setTimeout(() => {
|
|
updateTimeBar();
|
|
setInterval(updateTimeBar, 60 * 1000);
|
|
}, remainingSecond * 1000);
|
|
}
|
|
}
|
|
|
|
// 교류시간 기능 개발
|
|
export async function updateTimeBar() {
|
|
// overseas에서만 사용
|
|
if(!overviewVars.overseas) return;
|
|
|
|
const otherCountry = document.querySelector('.overview .nation-nm').innerText.trim();
|
|
const otherCountryIso = document.querySelector('.overview .nation-nm').dataset.iso.toUpperCase();
|
|
const otherUtcOffset = document.querySelector('.overview .nation-nm').dataset.utcOffset;
|
|
const krUtcOffset = 32400;
|
|
const offsetHours = otherUtcOffset / 3600;
|
|
|
|
|
|
// 프로젝트 국가가 대한민국이라면 생성X
|
|
if (otherCountry && otherCountry !== '대한민국' && otherCountry !== '한국') {
|
|
document.querySelector('.overview .overview-box-3 .box.exchange-time').style.display = 'block';
|
|
// 시차계산하여 현재 시간 출력 timebar에 사용
|
|
const kstTime = applyUtcOffsetTime(krUtcOffset);
|
|
const otherCountryTime = applyUtcOffsetTime(otherUtcOffset);
|
|
|
|
// 교류시간 3시간 동적 생성
|
|
for (let i = 0; i <= 8; i++) {
|
|
const hour = (i * 3) + (offsetHours - 9);
|
|
document.querySelector(`.overview .bottom-section-4 .other-country-time${i + 1}`).textContent = formatHour(hour)
|
|
}
|
|
|
|
// 교류시간 일과 시간 생성
|
|
const workTime = document.querySelectorAll('.overview .bottom-section-3 .timetable-block');
|
|
// 한국 기준 + 대상 국가 offset 시차 보정
|
|
let startTime = 9 + (9 - offsetHours);
|
|
let endTime = 9 + (17 - offsetHours);
|
|
|
|
// 0~24 범위로 보정
|
|
startTime = (startTime + 24) % 24;
|
|
endTime = (endTime + 24) % 24;
|
|
|
|
const startHour = Math.floor(startTime);
|
|
const endHour = Math.floor(endTime);
|
|
const startFraction = startTime - startHour;
|
|
const endFraction = endTime - endHour;
|
|
|
|
// 외국 근무시간 9~18 동적 생성
|
|
for (let i = 0; workTime.length > i; i++) {
|
|
if (startTime <= endTime) {
|
|
// 같은 날
|
|
if (i >= startTime && i <= endTime) {
|
|
workTime[i].classList.add('work-hour');
|
|
}
|
|
} else {
|
|
// 자정 넘는 경우
|
|
if (i >= startTime || i <= endTime) {
|
|
workTime[i].classList.add('work-hour');
|
|
}
|
|
}
|
|
}
|
|
// 15분 30분 45분 시차 부분색칠
|
|
if(startFraction && endFraction){
|
|
fillPartialBlock(workTime[startHour], startFraction, true);
|
|
fillPartialBlock(workTime[endHour+1], endFraction, false);
|
|
}
|
|
|
|
// 교류시간 시간과 나라
|
|
document.querySelector('.overview .time-bar .kst-time').innerText = 'KR : ' + kstTime;
|
|
document.querySelector('.overview .other-country').innerText = otherCountry;
|
|
document.querySelector('.overview .time-bar .other-country-time').innerText = ` ${otherCountryIso} : ` + otherCountryTime;
|
|
|
|
// 대한민국 시간 기준 left 계산
|
|
const moveRem = calculateRemPosition(kstTime); // 9시부터 시작
|
|
document.querySelector('.overview .time-bar').style.left = `${moveRem}rem`;
|
|
} else {
|
|
document.querySelector('.overview .overview-box-3 .box.exchange-time').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
|
|
// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Section-Right 페이지 랜더링 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
|