194 lines
7.7 KiB
HTML
194 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="/index/css/reset.css" />
|
|
<link rel="stylesheet" href="/index/css/system.css" />
|
|
<link rel="stylesheet" href="/index/css/style-index-projectStatus.css" />
|
|
<title>PM PROJECT STATUS</title>
|
|
</head>
|
|
|
|
<body>
|
|
<main class="main">
|
|
<aside class="main__menu">
|
|
<h3 class="main__menu_head">프로젝트 수행현황</h3>
|
|
<ul class="main__menu_list --scrollbar">
|
|
</ul>
|
|
</aside>
|
|
<section class="main__preview">
|
|
<iframe src="" frameborder="0"></iframe>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<script src="https://api.digitalarchive.work/hmCesium/lib/axios/dist/axios.js"></script>
|
|
<script>
|
|
let parentUser;
|
|
let initCalled = false;
|
|
window.addEventListener('message', (event) => {
|
|
if (event.origin === window.location.origin && !initCalled && event.data && event.data.message == 'projectStatusMessage') {
|
|
initCalled = true;
|
|
parentUser = event.data;
|
|
init();
|
|
}
|
|
})
|
|
//draw
|
|
async function init() {
|
|
document.querySelector('.main__menu_list').innerHTML = '';
|
|
let res = await axios.get(`/gsim/projectstatusList`);
|
|
let list = res.data.data;
|
|
|
|
for (let item in list) {
|
|
let li = document.createElement('li');
|
|
li.className = 'main__menu_list_item';
|
|
li.innerHTML = `<img
|
|
class="--icon"
|
|
src="/index/img-overseas/icon__file--primary-lv-3.svg"
|
|
alt="/"
|
|
/>
|
|
<h4 class="main__menu_list_item_text">${list[item].file_nm}</h4>
|
|
${(parentUser.user_id == 'M04308' || parentUser.group != null) ? '<button class="--button__xx-small" id="delete_btn"><img class="--icon" src="/index/img-overseas/icon__close--color-dahong.svg" alt="/" /> </button>' : ''}`;
|
|
document.querySelector('.main__menu_list').appendChild(li);
|
|
|
|
li.addEventListener('click', async () => {
|
|
let siblings = document.querySelectorAll('.main__menu_list_item');
|
|
siblings.forEach((item) => item.classList.remove('--selected'));
|
|
li.classList.add('--selected');
|
|
|
|
//presigned url 발급
|
|
// console.log(list[item].object_key);
|
|
// console.log(item);
|
|
let urlRes = await axios.get(`/gsim/getPresignedUrl?bucket=${list[item].bucket}&objectKey=${list[item].object_key}`);
|
|
let url = urlRes.data.data;
|
|
|
|
// let viewer = document.querySelector('.viewer');
|
|
// viewer.style.display = 'none';
|
|
// viewer.innerHTML = '';
|
|
|
|
let pdf_options = {
|
|
url: url,
|
|
initialPage: 1,
|
|
};
|
|
|
|
// let iframe = document.createElement('iframe');
|
|
let iframe = document.querySelector('iframe');
|
|
// viewer.appendChild(iframe);
|
|
|
|
iframe.src = `/libs/pdfViewer/web/viewer.html`;
|
|
iframe.addEventListener('load', () => {
|
|
try {
|
|
let appWin = iframe.contentWindow;
|
|
appWin.localStorage.removeItem('pdfjs.history');
|
|
Object.keys(appWin.localStorage).forEach(k => {
|
|
if (k.startsWith('pdfjs.history') || k.startsWith('pdfjs.preferences')) {
|
|
appWin.localStorage.removeItem(k);
|
|
}
|
|
});
|
|
} catch (e) { /* ignore */ }
|
|
|
|
let app = document.querySelector('iframe').contentWindow.PDFViewerApplication;
|
|
app.pdfCursorTools._handTool.activate();
|
|
app.open(pdf_options);
|
|
|
|
iframe.width = '100%';
|
|
iframe.height = '100%';
|
|
// viewer.style.display = 'block';
|
|
});
|
|
})
|
|
|
|
// if((parentUser.user_id == 'M04308' || parentUser.group != null)){
|
|
li.querySelector('#delete_btn')?.addEventListener('click', async () => {
|
|
if (confirm(`정말 ${list[item].file_nm}를 삭제합니까?`)) {
|
|
let deleteRes = await axios.delete(`/gsim/deleteFile?bucket=${list[item].bucket}&objectKey=${list[item].object_key}`);
|
|
if (deleteRes.data.message == 'deleteFile') {
|
|
init();
|
|
}
|
|
}
|
|
})
|
|
// }
|
|
|
|
if (item == list.length - 1) {
|
|
li.click();
|
|
}
|
|
}
|
|
}
|
|
|
|
//////upload
|
|
document.querySelector('body').addEventListener('dragover', (e) => {
|
|
if (parentUser.user_id != 'M04308' && parentUser.group == null) return;
|
|
e.preventDefault();
|
|
console.log('drag');
|
|
|
|
if (!document.getElementById('drag-over')) {
|
|
let div = document.createElement('div');
|
|
div.id = 'drag-over';
|
|
document.querySelector('body').appendChild(div);
|
|
|
|
div.style.width = '100%';
|
|
div.style.height = '100%';
|
|
div.style.position = 'absolute';
|
|
div.style.left = 0;
|
|
div.style.top = 0;
|
|
div.style.zIndex = 1000;
|
|
div.style.background = 'rgba(0,0,0,0.2)';
|
|
div.innerHTML = '<div class="drag-over--text" style="font-weight: 600; font-size: 3.5rem; color: #fff;">파일을 여기에 놓으세요</div>';
|
|
div.style.display = 'flex';
|
|
div.style.justifyContent = 'center';
|
|
div.style.alignItems = 'center';
|
|
|
|
dragOver = true;
|
|
|
|
div.addEventListener('dragleave', (e) => {
|
|
e.preventDefault();
|
|
console.log('dragleave');
|
|
|
|
document.getElementById('drag-over')?.remove();
|
|
})
|
|
}
|
|
})
|
|
document.querySelector('body').addEventListener('drop', async (e) => {
|
|
if (parentUser.user_id != 'M04308' && parentUser.group == null) return;
|
|
e.preventDefault();
|
|
console.log('drop');
|
|
document.getElementById('drag-over')?.remove();
|
|
|
|
//파일 저장
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
if (file.type != 'application/pdf') {
|
|
alert('pdf 파일만 업로드 할 수 있습니다.');
|
|
return;
|
|
}
|
|
let uploadRes = await axios.get(`/gsim/uploadUrl?filename=${file.name}`);
|
|
let uploadUrl = uploadRes.data.data;
|
|
|
|
await axios.put(uploadUrl, file, {
|
|
headers: {
|
|
'Content-Type': file.type || 'application/pdf'
|
|
},
|
|
onUploadProgress: async progress => {
|
|
// let totalSize = progress.total;
|
|
// let loadedSize = progress.loaded;
|
|
// let percentage = (loadedSize / totalSize) * 100;
|
|
// progressData.loadedSize = loadedSize;
|
|
// progressData.totalSize = totalSize;
|
|
// progressData.percentage = percentage;
|
|
// if (percentage != 100) progressData.state = 'working';
|
|
// if (percentage == 100) progressData.state = 'finish';
|
|
}
|
|
});
|
|
|
|
//db insert
|
|
await axios.get('/gsim/insertProjectStatusData?filename=' + file.name);
|
|
}
|
|
}
|
|
|
|
init();
|
|
})
|
|
</script> |