|
@@ -72,317 +72,264 @@
|
|
|
$(()=>{
|
|
$(()=>{
|
|
|
microsoftTeams.appInitialization.notifySuccess();
|
|
microsoftTeams.appInitialization.notifySuccess();
|
|
|
getGroupList();
|
|
getGroupList();
|
|
|
- // callApi('get', '/me/drive/root/children', (jsonData)=>{
|
|
|
|
|
- // console.log('=======================one drive==========================');
|
|
|
|
|
- // console.log(jsonData);
|
|
|
|
|
- // console.log('============================================================');
|
|
|
|
|
- // let str = `<li>
|
|
|
|
|
- // <input type="checkbox" checked="false" id="my-one-drive" onclick="showOneDrive()">
|
|
|
|
|
- // <label for="my-one-drive">One Drive</label>
|
|
|
|
|
- // <ul>`;
|
|
|
|
|
- // if (jsonData && jsonData.value) {
|
|
|
|
|
- // const drives = jsonData.value;
|
|
|
|
|
- // drives.forEach((drive)=>{
|
|
|
|
|
- // str +=`<li id="${drive.id}" onclick="DrawOneDrive(${drive.id})">${drive.name}</li>`
|
|
|
|
|
- // })
|
|
|
|
|
- // }
|
|
|
|
|
- // str += `</ul>
|
|
|
|
|
- // </li>`;
|
|
|
|
|
- // $('.group').append(str);
|
|
|
|
|
- // });
|
|
|
|
|
- // callApi('get', '/me/joinedTeams', (jsonData)=>{
|
|
|
|
|
- // console.log('======================joinedTeams======================')
|
|
|
|
|
- // console.log(jsonData);
|
|
|
|
|
- // if (jsonData && jsonData.value && jsonData.value.length) {
|
|
|
|
|
- // // jsonData.value.forEach((team)=>{
|
|
|
|
|
- // // team.id
|
|
|
|
|
- // // callApi('get', '/')
|
|
|
|
|
- // // })
|
|
|
|
|
- // }
|
|
|
|
|
- // // let str = `<li>
|
|
|
|
|
- // // <input type="checkbox" checked="false" id="my-one-drive" onclick="showOneDrive()">
|
|
|
|
|
- // // <label for="my-one-drive">One Drive</label>
|
|
|
|
|
- // // <ul>`;
|
|
|
|
|
- // // if (jsonData && jsonData.value) {
|
|
|
|
|
- // // const drives = jsonData.value;
|
|
|
|
|
- // // drives.forEach((drive)=>{
|
|
|
|
|
- // // str +=`<li id="${drive.id}" onclick="DrawOneDrive(${drive.id})">${drive.name}</li>`
|
|
|
|
|
- // // })
|
|
|
|
|
- // // }
|
|
|
|
|
- // // str += `</ul>
|
|
|
|
|
- // // </li>`;
|
|
|
|
|
- // });
|
|
|
|
|
- // callApi('get', '/sites', (jsonData)=>{
|
|
|
|
|
- // console.log('=====================sites===================');
|
|
|
|
|
- // console.log(jsonData);
|
|
|
|
|
- // });
|
|
|
|
|
- // callApi('get', '/me/drives', (jsonData)=>{
|
|
|
|
|
- // console.log('=====================/me/drives===================');
|
|
|
|
|
- // console.log(jsonData);
|
|
|
|
|
- // // drawOneDrive(jsonData);
|
|
|
|
|
- // })
|
|
|
|
|
- // getGroupList();
|
|
|
|
|
- // callApi('get', '/groups/'+groupId+'/drive/items/root/children', (jsonData) =>drawFileList(jsonData, groupId));
|
|
|
|
|
- //
|
|
|
|
|
|
|
+
|
|
|
window.oncontextmenu = function () {
|
|
window.oncontextmenu = function () {
|
|
|
return false;
|
|
return false;
|
|
|
- };
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
- function getFileList(id) {
|
|
|
|
|
- // callApi('get', "/"+id+"/drive/root/children", "Files.Read", drawFileList, id);
|
|
|
|
|
- callApi('get', "/users/"+id+"/drive", drawFileList, id);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
- // function drawList(jsonData) {
|
|
|
|
|
- // if (jsonData && jsonData.value) {
|
|
|
|
|
- // const group = $('.group');
|
|
|
|
|
- // let str = "";
|
|
|
|
|
- // jsonData.value.forEach(element => {
|
|
|
|
|
- // str+=`<li onclick="getFileList('${element.userPrincipalName}')">
|
|
|
|
|
- // <div style="display:flex;">
|
|
|
|
|
- // <div class="circle-name">${element.givenName}</div>
|
|
|
|
|
- // <div style="display:flex; flex-direction:column; justify-content:space-between;">
|
|
|
|
|
- // <div style="font-size: 16px; font-weight:bold;">${element.displayName}</div>
|
|
|
|
|
- // <div style="font-size: 12px; color: #7b7777ec;">${element.mail}</div>
|
|
|
|
|
- // </div>
|
|
|
|
|
- // </div>
|
|
|
|
|
- // </li>`
|
|
|
|
|
- // });
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- // group.html(str);
|
|
|
|
|
- // }
|
|
|
|
|
- // }
|
|
|
|
|
-
|
|
|
|
|
- function drawFileList(jsonData) {
|
|
|
|
|
- _selectedData = [];
|
|
|
|
|
- if (jsonData && jsonData.value && jsonData.value.length > 0) {
|
|
|
|
|
- _selectedData = jsonData.value;
|
|
|
|
|
- let str = "";
|
|
|
|
|
- const $fileContent = $('.file-content');
|
|
|
|
|
- const $oneDriveBtn = $('.one-drive-button');
|
|
|
|
|
- const panel = $('.panel');
|
|
|
|
|
- let panelStr = "";
|
|
|
|
|
-
|
|
|
|
|
- jsonData.value.forEach((obj, idx)=>{
|
|
|
|
|
- if (idx === 0 && obj.parentReference) {
|
|
|
|
|
- const parent = $('#' + obj.parentReference.id);
|
|
|
|
|
- if (parent) {
|
|
|
|
|
- console.log(parent);
|
|
|
|
|
- }
|
|
|
|
|
- console.log(obj.parentReference.id);
|
|
|
|
|
- panelStr += `<span class="panel-item on" id="${obj.parentReference.id}" onclick="findChildrenItems(${obj.parentReference.id})">${obj.parentReference.name}</span>`
|
|
|
|
|
-
|
|
|
|
|
- panel.html(panelStr);
|
|
|
|
|
- }
|
|
|
|
|
- dragAndDrop(obj.id);
|
|
|
|
|
- let images = "/static/images/";
|
|
|
|
|
- $oneDriveBtn.off('click');
|
|
|
|
|
- if (obj.webUrl){
|
|
|
|
|
- $oneDriveBtn.on('click', ()=>{
|
|
|
|
|
- window.open(obj.webUrl);
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- let modifyName = "";
|
|
|
|
|
- if (obj.lastModifiedBy && obj.lastModifiedBy.user) {
|
|
|
|
|
- modifyName = obj.lastModifiedBy.user.displayName;
|
|
|
|
|
- }
|
|
|
|
|
- if (obj.folder || obj.driveType) {
|
|
|
|
|
- images += "folder.png";
|
|
|
|
|
- }
|
|
|
|
|
- else if (obj.file && obj.name) {
|
|
|
|
|
- let ext = obj.name.substring(obj.name.lastIndexOf('.') + 1);
|
|
|
|
|
- if (obj.file.mimeType && obj.file.mimeType.includes('image')){
|
|
|
|
|
- ext = 'photo';
|
|
|
|
|
- }
|
|
|
|
|
- images += ext+ ".svg";
|
|
|
|
|
- }
|
|
|
|
|
- else {
|
|
|
|
|
- images += "file.png";
|
|
|
|
|
- }
|
|
|
|
|
- let amount = '';
|
|
|
|
|
- if (obj.quota) {
|
|
|
|
|
- amount = getVolume(obj.quota.remaining);
|
|
|
|
|
- }
|
|
|
|
|
- if (obj.size) {
|
|
|
|
|
- amount = getVolume(obj.size);
|
|
|
|
|
- }
|
|
|
|
|
- let modifyDate = obj.lastModifiedDateTime;
|
|
|
|
|
- if (modifyDate) {
|
|
|
|
|
- modifyDate = modifyDate.replace('T', ' ');
|
|
|
|
|
- modifyDate = modifyDate.substring(5, 7)+ '월 '+ modifyDate.substring(8, 10)+ '일';
|
|
|
|
|
- }
|
|
|
|
|
- str += `
|
|
|
|
|
- <div id="row_${idx}">
|
|
|
|
|
- <div>
|
|
|
|
|
- <input type="checkbox" name="row_${idx}" value="${obj.id}" onclick="event.stopPropagation()">
|
|
|
|
|
- <img src="${images}" width="20" height="20" alt="폴더 이미지">
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="file_name"><span class="sp-name" onclick="findChildrenItems('${obj.id}', '${obj.name}')">${obj.name}</span></div>
|
|
|
|
|
- <div>${amount}</div>
|
|
|
|
|
- <div>${modifyDate}</div>
|
|
|
|
|
- <div>${modifyName}</div>
|
|
|
|
|
- <div></div>
|
|
|
|
|
- </div>`
|
|
|
|
|
- });
|
|
|
|
|
- $fileContent.html(str);
|
|
|
|
|
- $('.file-content > div').on('click', function(e){
|
|
|
|
|
- e.preventDefault();
|
|
|
|
|
- const checkbox = $('input[name="' + $(this).attr('id') + '"]');
|
|
|
|
|
- if (checkbox[0]) {
|
|
|
|
|
- const isChecked = checkbox.prop("checked");
|
|
|
|
|
- checkbox.prop('checked', !isChecked);
|
|
|
|
|
- const method = !isChecked ? 'addClass' : 'removeClass';
|
|
|
|
|
- $(this)[method]('on');
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ function drawDriveFiles(jsonData, parentData, name) {
|
|
|
|
|
+ _selectedData = [];
|
|
|
|
|
+ const panel = $('.panel');
|
|
|
|
|
+ let panelStr = `<span class="panel-item on">${name}</span>`;
|
|
|
|
|
+ const $fileContent = $('.file-content');
|
|
|
|
|
+ const $oneDriveBtn = $('.one-drive-button');
|
|
|
|
|
+ let text = name;
|
|
|
|
|
+ if (name !== 'One Drive') {
|
|
|
|
|
+ text = 'SharePoint'
|
|
|
|
|
+ }
|
|
|
|
|
+ $oneDriveBtn.text(text+'에서 열기');
|
|
|
|
|
+ $oneDriveBtn.off('click');
|
|
|
|
|
+
|
|
|
|
|
+ if (jsonData && jsonData.value && jsonData.value.length > 0) {
|
|
|
|
|
+ if (jsonData.value[0].webUrl) {
|
|
|
|
|
+ $oneDriveBtn.on('click', ()=>{
|
|
|
|
|
+ window.open(obj.webUrl);
|
|
|
|
|
+ });
|
|
|
|
|
+ };
|
|
|
|
|
+ _selectedData = jsonData;
|
|
|
|
|
+ const selectedPref = _selectedData.value[0].parentReference;
|
|
|
|
|
+ if (selectedPref && selectedPref.path) {
|
|
|
|
|
+ let path = selectedPref.path;
|
|
|
|
|
+ panelStr = drawPath(path, selectedPref.siteId, name);
|
|
|
|
|
+ }
|
|
|
|
|
+ let str = "";
|
|
|
|
|
+ jsonData.value.forEach((obj, idx)=>{
|
|
|
|
|
+ dragAndDrop(obj.id);
|
|
|
|
|
+ let images = "/static/images/";
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ let modifyName = "";
|
|
|
|
|
+ if (obj.lastModifiedBy && obj.lastModifiedBy.user) {
|
|
|
|
|
+ modifyName = obj.lastModifiedBy.user.displayName;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (obj.folder || obj.driveType) {
|
|
|
|
|
+ images += "folder.png";
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (obj.file && obj.name) {
|
|
|
|
|
+ let ext = obj.name.substring(obj.name.lastIndexOf('.') + 1);
|
|
|
|
|
+ let imageExt = ".svg";
|
|
|
|
|
+ if (obj.file.mimeType && obj.file.mimeType.includes('image')){
|
|
|
|
|
+ ext = 'photo';
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (['pptx', 'ppt', 'pptm'].includes(ext)) {
|
|
|
|
|
+ ext = 'pptx';
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (['xlsx', 'xlsm', 'xlsb', 'xltx'].includes(ext)) {
|
|
|
|
|
+ ext = 'xlsx';
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (['pdf'].includes(ext)) {
|
|
|
|
|
+ ext = 'pdf';
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (['doc', 'docx'].includes(ext)) {
|
|
|
|
|
+ ext = 'docx';
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (['one', 'onetoc'].includes(ext)) {
|
|
|
|
|
+ ext = 'onetoc';
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (['vsd', 'vdx', 'vdw', 'vstx', 'vstm', 'vst', 'vtx', 'vsdx'].includes(ext)) {
|
|
|
|
|
+ ext = 'vsdx';
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (['zip', 'apk', 'rar', '7z', 'tar'].includes(ext)) {
|
|
|
|
|
+ ext = 'zip';
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (['mp4', 'mov', 'Webm', 'mp3','wav', 'Ogg'].includes(ext)) {
|
|
|
|
|
+ ext = 'clipchamp';
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ ext = 'file';
|
|
|
|
|
+ imageExt = '.png';
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- window.addEventListener('click', ()=>{
|
|
|
|
|
- if ($('.toggle-box')[0]){
|
|
|
|
|
- $('.toggle-box').remove();
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- $('.file-content > div').on('mousedown', function(e){
|
|
|
|
|
- if ((e.button == 2) || (e.which == 3)) {
|
|
|
|
|
- const checkbox = $('input[name="'+$(this).attr('id') + '"]');
|
|
|
|
|
- if (!$(this).hasClass('on')) {
|
|
|
|
|
- checkbox.prop('checked', true);
|
|
|
|
|
- $(this).addClass('on');
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ images += ext + imageExt;
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ images += "file.png";
|
|
|
|
|
+ }
|
|
|
|
|
+ let amount = '0 Bytes';
|
|
|
|
|
+ if (obj.size) {
|
|
|
|
|
+ amount = getVolume(obj.size);
|
|
|
|
|
+ }
|
|
|
|
|
+ let modifyDate = obj.lastModifiedDateTime;
|
|
|
|
|
+ if (modifyDate) {
|
|
|
|
|
+ modifyDate = modifyDate.replace('T', ' ');
|
|
|
|
|
+ modifyDate = modifyDate.substring(5, 7)+ '월 '+ modifyDate.substring(8, 10)+ '일';
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- if ($('.toggle-box')[0]) {
|
|
|
|
|
- $('.toggle-box').remove();
|
|
|
|
|
- }
|
|
|
|
|
- const {clientX, clientY} = e;
|
|
|
|
|
- const toggleBox = $(`<div class="toggle-box" style="position:absolute; top:${clientY}; left: ${clientX}">
|
|
|
|
|
- <div>편집</div>
|
|
|
|
|
- <div>탭으로 설정</div>
|
|
|
|
|
- <div>다운로드</div>
|
|
|
|
|
- <div>삭제</div>
|
|
|
|
|
- <div>이동</div>
|
|
|
|
|
- <div>복사</div>
|
|
|
|
|
- <div onclick="nameChange()">이름 바꾸기</div>
|
|
|
|
|
- </div>`);
|
|
|
|
|
- $('body').append(toggleBox);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ // let method = `findOneDriveChildrenItems('${obj.id}')`;(siteId, path, name, value)
|
|
|
|
|
+ let method = `siteDriveChildrenItems('${obj.parentReference.siteId}','${obj.parentReference.path + '/' + obj.name}','${name}')`;
|
|
|
|
|
+ if (obj.file) {
|
|
|
|
|
+ method = `downloadItems('${obj['@microsoft.graph.downloadUrl']}', '${obj.name}', event)`;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ str += `
|
|
|
|
|
+ <div id="row_${idx}">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <input type="checkbox" name="row_${idx}" value="${obj.id}" onclick="event.stopPropagation()">
|
|
|
|
|
+ <img src="${images}" width="20" height="20" alt="폴더 이미지">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="file_name"><span class="sp-name" onclick="${method}">${obj.name}</span></div>
|
|
|
|
|
+ <div>${amount}</div>
|
|
|
|
|
+ <div>${modifyDate}</div>
|
|
|
|
|
+ <div>${modifyName}</div>
|
|
|
|
|
+ <div></div>
|
|
|
|
|
+ </div>`
|
|
|
|
|
+ });
|
|
|
|
|
+ $fileContent.html(str);
|
|
|
|
|
+ $('.file-content > div').on('click', function(e){
|
|
|
|
|
+ e.preventDefault();
|
|
|
|
|
+ const checkbox = $('input[name="'+$(this).attr('id') + '"]');
|
|
|
|
|
+ if (checkbox[0]) {
|
|
|
|
|
+ const isChecked = checkbox.prop("checked");
|
|
|
|
|
+ checkbox.prop('checked', !isChecked);
|
|
|
|
|
+ const method = !isChecked ? 'addClass' : 'removeClass';
|
|
|
|
|
+ $(this)[method]('on');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
- function drawOneDrive(jsonData, name) {
|
|
|
|
|
- _selectedData = [];
|
|
|
|
|
- const panel = $('.panel');
|
|
|
|
|
- let panelStr = `<span class="panel-item on" onclick="showOneDrive()">One Drive</span>`;
|
|
|
|
|
- panel.html(panelStr);
|
|
|
|
|
- if (jsonData && jsonData.value && jsonData.value.length > 0) {
|
|
|
|
|
- _selectedData = jsonData.value;
|
|
|
|
|
- let str = "";
|
|
|
|
|
- const $fileContent = $('.file-content');
|
|
|
|
|
- const $oneDriveBtn = $('.one-drive-button');
|
|
|
|
|
-
|
|
|
|
|
- jsonData.value.forEach((obj, idx)=>{
|
|
|
|
|
- console.log(obj);
|
|
|
|
|
- dragAndDrop(obj.id);
|
|
|
|
|
- let images = "/static/images/";
|
|
|
|
|
|
|
+ window.addEventListener('click', ()=>{
|
|
|
|
|
+ if ($('.toggle-box')[0]){
|
|
|
|
|
+ $('.toggle-box').remove();
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ $('.file-content > div').on('mousedown', function(e){
|
|
|
|
|
+ if ((e.button == 2) || (e.which == 3)) {
|
|
|
|
|
+ const checkbox = $('input[name="'+$(this).attr('id') + '"]');
|
|
|
|
|
+ if (!$(this).hasClass('on')) {
|
|
|
|
|
+ checkbox.prop('checked', true);
|
|
|
|
|
+ $(this).addClass('on');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if ($('.toggle-box')[0]) {
|
|
|
|
|
+ $('.toggle-box').remove();
|
|
|
|
|
+ }
|
|
|
|
|
+ const {clientX, clientY} = e;
|
|
|
|
|
+ const toggleBox = $(`<div class="toggle-box" style="position:absolute; top:${clientY}; left: ${clientX}">
|
|
|
|
|
+ <div>편집</div>
|
|
|
|
|
+ <div>탭으로 설정</div>
|
|
|
|
|
+ <div>다운로드</div>
|
|
|
|
|
+ <div>삭제</div>
|
|
|
|
|
+ <div>이동</div>
|
|
|
|
|
+ <div>복사</div>
|
|
|
|
|
+ <div onclick="nameChange()">이름 바꾸기</div>
|
|
|
|
|
+ </div>`);
|
|
|
|
|
+ $('body').append(toggleBox);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ if (parentData && parentData.folder && parentData.folder.childCount === 0) {
|
|
|
|
|
+ const refData = parentData.parentReference;
|
|
|
|
|
+ panelStr = drawPath(refData.path +'/' + parentData.name, refData.siteId ,name);
|
|
|
$oneDriveBtn.off('click');
|
|
$oneDriveBtn.off('click');
|
|
|
- if (obj.webUrl){
|
|
|
|
|
|
|
+
|
|
|
|
|
+ if (parentData.webUrl){
|
|
|
$oneDriveBtn.on('click', ()=>{
|
|
$oneDriveBtn.on('click', ()=>{
|
|
|
- window.open(obj.webUrl);
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ window.open(parentData.webUrl);
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- let modifyName = "";
|
|
|
|
|
- if (obj.lastModifiedBy && obj.lastModifiedBy.user) {
|
|
|
|
|
- modifyName = obj.lastModifiedBy.user.displayName;
|
|
|
|
|
- }
|
|
|
|
|
- if (obj.folder || obj.driveType) {
|
|
|
|
|
- images += "folder.png";
|
|
|
|
|
- }
|
|
|
|
|
- else if (obj.file && obj.name) {
|
|
|
|
|
- let ext = obj.name.substring(obj.name.lastIndexOf('.') + 1);
|
|
|
|
|
- if (obj.file.mimeType && obj.file.mimeType.includes('image')){
|
|
|
|
|
- ext = 'photo';
|
|
|
|
|
- }
|
|
|
|
|
- images += ext+ ".svg";
|
|
|
|
|
- }
|
|
|
|
|
- else {
|
|
|
|
|
- images += "file.png";
|
|
|
|
|
- }
|
|
|
|
|
- let amount = '0 Bytes';
|
|
|
|
|
- if (obj.size) {
|
|
|
|
|
- amount = getVolume(obj.size);
|
|
|
|
|
- }
|
|
|
|
|
- let modifyDate = obj.lastModifiedDateTime;
|
|
|
|
|
- if (modifyDate) {
|
|
|
|
|
- modifyDate = modifyDate.replace('T', ' ');
|
|
|
|
|
- modifyDate = modifyDate.substring(5, 7)+ '월 '+ modifyDate.substring(8, 10)+ '일';
|
|
|
|
|
- }
|
|
|
|
|
- str += `
|
|
|
|
|
- <div id="row_${idx}">
|
|
|
|
|
- <div>
|
|
|
|
|
- <input type="checkbox" name="row_${idx}" value="${obj.id}" onclick="event.stopPropagation()">
|
|
|
|
|
- <img src="${images}" width="20" height="20" alt="폴더 이미지">
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="file_name"><span class="sp-name" onclick="findOneDriveChildrenItems('${obj.id}')">${obj.name}</span></div>
|
|
|
|
|
- <div>${amount}</div>
|
|
|
|
|
- <div>${modifyDate}</div>
|
|
|
|
|
- <div>${modifyName}</div>
|
|
|
|
|
- <div></div>
|
|
|
|
|
- </div>`
|
|
|
|
|
- });
|
|
|
|
|
- $fileContent.html(str);
|
|
|
|
|
- $('.file-content > div').on('click', function(e){
|
|
|
|
|
- e.preventDefault();
|
|
|
|
|
- const checkbox = $('input[name="'+$(this).attr('id') + '"]');
|
|
|
|
|
- if (checkbox[0]) {
|
|
|
|
|
- const isChecked = checkbox.prop("checked");
|
|
|
|
|
- checkbox.prop('checked', !isChecked);
|
|
|
|
|
- const method = !isChecked ? 'addClass' : 'removeClass';
|
|
|
|
|
- $(this)[method]('on');
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- window.addEventListener('click', ()=>{
|
|
|
|
|
- if ($('.toggle-box')[0]){
|
|
|
|
|
- $('.toggle-box').remove();
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- $('.file-content > div').on('mousedown', function(e){
|
|
|
|
|
- if ((e.button == 2) || (e.which == 3)) {
|
|
|
|
|
- const checkbox = $('input[name="'+$(this).attr('id') + '"]');
|
|
|
|
|
- if (!$(this).hasClass('on')) {
|
|
|
|
|
- checkbox.prop('checked', true);
|
|
|
|
|
- $(this).addClass('on');
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- if ($('.toggle-box')[0]) {
|
|
|
|
|
- $('.toggle-box').remove();
|
|
|
|
|
- }
|
|
|
|
|
- const {clientX, clientY} = e;
|
|
|
|
|
- const toggleBox = $(`<div class="toggle-box" style="position:absolute; top:${clientY}; left: ${clientX}">
|
|
|
|
|
- <div>편집</div>
|
|
|
|
|
- <div>탭으로 설정</div>
|
|
|
|
|
- <div>다운로드</div>
|
|
|
|
|
- <div>삭제</div>
|
|
|
|
|
- <div>이동</div>
|
|
|
|
|
- <div>복사</div>
|
|
|
|
|
- <div onclick="nameChange()">이름 바꾸기</div>
|
|
|
|
|
- </div>`);
|
|
|
|
|
- $('body').append(toggleBox);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ $fileContent.html(`<div class="empty-box">
|
|
|
|
|
+ <img src="/static/images/empty_folder_v2.svg" alt="이미지">
|
|
|
|
|
+ <div>이 폴더는 비어 있습니다.</div>
|
|
|
|
|
+ </div>`)
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ panel.html(panelStr);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// callApi('get','/deviceManagement', (jsonData)=>{
|
|
// callApi('get','/deviceManagement', (jsonData)=>{
|
|
|
// console.log(jsonData);
|
|
// console.log(jsonData);
|
|
|
// })
|
|
// })
|
|
|
|
|
+ function drawDrivePath(path, name, siteId) {
|
|
|
|
|
+ if (path) {
|
|
|
|
|
+ let formatPath = path.substring(path.lastIndexOf('root:') + 5);
|
|
|
|
|
+
|
|
|
|
|
+ if (formatPath) {
|
|
|
|
|
+ formatPath = formatPath.substring(1);
|
|
|
|
|
+ formatPath = formatPath.split('/');
|
|
|
|
|
+ panelStr = `<span class="panel-item" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${name}', '${siteId}')">${name}</span>`;
|
|
|
|
|
+ let itemPath = "/drive/root:";
|
|
|
|
|
+ if (Array.isArray(formatPath)) {
|
|
|
|
|
+ for(let ii = 0; ii < formatPath.length; ii++) {
|
|
|
|
|
+ let pathName = formatPath[ii];
|
|
|
|
|
+ let className = 'panel-item';
|
|
|
|
|
+ itemPath += "/" + pathName;
|
|
|
|
|
+ let method = `drawDriveFiles('${itemPath}', event)`;
|
|
|
|
|
+ if (formatPath.length - 1 === ii) {
|
|
|
|
|
+ className += ' on';
|
|
|
|
|
+ method = '';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ panelStr += `<span> > </span><span class="${className}" onclick="${method}">${pathName}</span>`;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ return panelStr;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ return `<span class="panel-item on">${name}</span>`;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function drawPath(path, siteId, name) {
|
|
|
|
|
+ let imgSrc = '';
|
|
|
|
|
+ let panelStr = '';
|
|
|
|
|
+ if ($('#'+siteId).next().find('img')[0]) {
|
|
|
|
|
+ imgSrc = $('#'+siteId).next().find('img').attr('src');
|
|
|
|
|
+ }
|
|
|
|
|
+ if (path) {
|
|
|
|
|
+ let formatPath = path.substring(path.lastIndexOf('root:') + 5);
|
|
|
|
|
+
|
|
|
|
|
+ if (formatPath) {
|
|
|
|
|
+ formatPath = formatPath.substring(1);
|
|
|
|
|
+ formatPath = formatPath.split('/');
|
|
|
|
|
+ panelStr = `<span class="panel-item" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${name}', '${siteId}')">`;
|
|
|
|
|
+ if (imgSrc) {
|
|
|
|
|
+ panelStr += `<img style="margin-right:5px;" width="24" height="24" src="${imgSrc}" alt="이미지">`
|
|
|
|
|
+ }
|
|
|
|
|
+ panelStr += ` ${name}</span>`;
|
|
|
|
|
+ let itemPath = "/drive/root:";
|
|
|
|
|
+ if (Array.isArray(formatPath)) {
|
|
|
|
|
+ for(let ii = 0; ii < formatPath.length; ii++) {
|
|
|
|
|
+ let pathName = formatPath[ii];
|
|
|
|
|
+ let className = 'panel-item';
|
|
|
|
|
+ itemPath += "/" + pathName;
|
|
|
|
|
+ let method = `siteDriveChildrenItems('${siteId}','${itemPath}', '${name}')`;
|
|
|
|
|
+ if (formatPath.length - 1 === ii) {
|
|
|
|
|
+ className += ' on';
|
|
|
|
|
+ method = '';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ panelStr += `<span> > </span><span class="${className}" onclick="${method}">${pathName}</span>`;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ return panelStr;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ panelStr = `<span class="panel-item on">`;
|
|
|
|
|
+ if (imgSrc) {
|
|
|
|
|
+ panelStr += `<img style="margin-right:5px;" width="24" height="24" src="${imgSrc}" alt="이미지">`
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ panelStr += ` ${name}</span>`;
|
|
|
|
|
|
|
|
|
|
+ return panelStr;
|
|
|
|
|
+ }
|
|
|
function nameChange() {
|
|
function nameChange() {
|
|
|
if ($('.file-content > .on .file_name')[0]) {
|
|
if ($('.file-content > .on .file_name')[0]) {
|
|
|
- console.log($('.file-content > .on .file_name').text());
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -398,13 +345,28 @@
|
|
|
});
|
|
});
|
|
|
$fileContent.on('dragleave', function(e){
|
|
$fileContent.on('dragleave', function(e){
|
|
|
$(this).css('background-color', '#f5f5f5');
|
|
$(this).css('background-color', '#f5f5f5');
|
|
|
|
|
+
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
$fileContent.on("drop", function(e){
|
|
$fileContent.on("drop", function(e){
|
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
|
$(this).css('background-color', '#f5f5f5');
|
|
$(this).css('background-color', '#f5f5f5');
|
|
|
- const file = e.originalEvent.dataTransfer.files[0];
|
|
|
|
|
- encryptFile(file, driveId);
|
|
|
|
|
|
|
+ const transfer = e.originalEvent.dataTransfer;
|
|
|
|
|
+ console.log(e.dataTransfer);
|
|
|
|
|
+ console.log(transfer.items);
|
|
|
|
|
+ if (transfer.items.length > 0) {
|
|
|
|
|
+ for (let ii=0; ii < transfer.items.length; ii++) {
|
|
|
|
|
+ entries[0] = e.dataTransfer.items[ii].webkitGetAsEntry();
|
|
|
|
|
+ console.log(entries[0]);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ if (transfer && transfer.files && transfer.files.length > 0) {
|
|
|
|
|
+ for (let ii = 0; ii < transfer.files.length; ii++) {
|
|
|
|
|
+ console.log(transfer.files[ii]);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ // const file = e.originalEvent.dataTransfer.files[0];
|
|
|
|
|
+ // encryptFile(file, driveId);
|
|
|
// if (file && file.type.startsWith("image")) {
|
|
// if (file && file.type.startsWith("image")) {
|
|
|
// displayImage(file);
|
|
// displayImage(file);
|
|
|
// }
|
|
// }
|
|
@@ -482,48 +444,23 @@
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function findChildrenItems(id, type) {
|
|
|
|
|
- window.event.preventDefault();
|
|
|
|
|
- window.event.stopPropagation();
|
|
|
|
|
-
|
|
|
|
|
- // const param = {
|
|
|
|
|
- // "requests": [
|
|
|
|
|
- // {
|
|
|
|
|
- // "entityTypes": [
|
|
|
|
|
- // "driveItem"
|
|
|
|
|
- // ],
|
|
|
|
|
- // "query": {
|
|
|
|
|
- // "queryString": id
|
|
|
|
|
- // }
|
|
|
|
|
- // }
|
|
|
|
|
- // ]
|
|
|
|
|
- // }
|
|
|
|
|
- //
|
|
|
|
|
- // callApi('post', '/search/query', (jsonData)=>{
|
|
|
|
|
- // console.log(jsonData);
|
|
|
|
|
- // },null, param);
|
|
|
|
|
- if ($('#' + id)[0]) return;
|
|
|
|
|
- let uri = '/groups/'+groupId+'/drive/items/'+id+'/children';
|
|
|
|
|
- callApi('get', uri, (jsonData)=>{
|
|
|
|
|
- drawFileList(jsonData);
|
|
|
|
|
- },null);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function findOneDriveChildrenItems(id) {
|
|
|
|
|
- callApi('get', '/me/drive/items/'+id+'/children', (jsonData)=>{
|
|
|
|
|
- drawOneDrive(jsonData);
|
|
|
|
|
- },null);
|
|
|
|
|
|
|
+ function siteDriveChildrenItems(siteId, path, name, value) {
|
|
|
|
|
+ if (value) {
|
|
|
|
|
+ $('.tree.group input').prop('checked', true);
|
|
|
|
|
+ $('input[value="'+value+'"]').prop('checked', false);
|
|
|
|
|
+ if ($('.panel').children().text() === name) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ callApi('get', '/sites/' +siteId +'/'+ path, (jsonData)=>{
|
|
|
|
|
+ if (jsonData && jsonData.id) {
|
|
|
|
|
+ callApi('get', '/sites/' +siteId +'/drive/items/'+jsonData.id+'/children', (childrenData)=>{
|
|
|
|
|
+ // drawOneDrive(childrenData, jsonData, name);
|
|
|
|
|
+ drawDriveFiles(childrenData, jsonData, name);
|
|
|
|
|
+ },null);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
- // $.ajax({
|
|
|
|
|
- // url: '/test',
|
|
|
|
|
- // method : 'post',
|
|
|
|
|
- // success: function(res){
|
|
|
|
|
- // console.log(res);
|
|
|
|
|
- // },
|
|
|
|
|
- // error: function(error) {
|
|
|
|
|
- // console.log(error);
|
|
|
|
|
- // }
|
|
|
|
|
- // })
|
|
|
|
|
|
|
|
|
|
function getVolume(amount) {
|
|
function getVolume(amount) {
|
|
|
const tb = 1099511627776;
|
|
const tb = 1099511627776;
|
|
@@ -583,34 +520,51 @@
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+//sites/2ec19976-da37-4d7e-993a-fe82cf97a586/drive/items/01ILDTREXEZN5EXKD5YJHLNYXU6HTAX5VS/children
|
|
|
|
|
+//oneDrive => /me/drive/items/${item.id}/children
|
|
|
function drawList(jsonData) {
|
|
function drawList(jsonData) {
|
|
|
const group = $('.group');
|
|
const group = $('.group');
|
|
|
group.empty();
|
|
group.empty();
|
|
|
if (jsonData) {
|
|
if (jsonData) {
|
|
|
const {oneDrive, joinedTeams, sites} = jsonData;
|
|
const {oneDrive, joinedTeams, sites} = jsonData;
|
|
|
|
|
+ let parentId = '';
|
|
|
|
|
+ let siteId = '';
|
|
|
|
|
+ if (oneDrive && oneDrive.length > 0) {
|
|
|
|
|
+ if (oneDrive[0].parentReference) {
|
|
|
|
|
+ siteId = oneDrive[0].parentReference.siteId;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ // <input type="checkbox" checked="false" id="my-one-drive" value="${parentId}" onclick="showOneDrive(event)">
|
|
|
|
|
+ //siteDriveChildrenItems(siteId, path, name)
|
|
|
let str = `<li>
|
|
let str = `<li>
|
|
|
- <input type="checkbox" checked="false" id="my-one-drive" onclick="showOneDrive()">
|
|
|
|
|
- <label for="my-one-drive">One Drive</label>
|
|
|
|
|
|
|
+ <input type="checkbox" checked="false" id="${siteId}" value="${siteId}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', 'One Drive', '${siteId}')">
|
|
|
|
|
+ <label for="${siteId}">One Drive</label>
|
|
|
<ul>`;
|
|
<ul>`;
|
|
|
if (oneDrive && oneDrive.length > 0) {
|
|
if (oneDrive && oneDrive.length > 0) {
|
|
|
oneDrive.forEach((drive)=>{
|
|
oneDrive.forEach((drive)=>{
|
|
|
- str +=`<li id="${drive.id}" onclick="DrawOneDriveFile('${drive.id}', '${drive.name}')">${drive.name}</li>`
|
|
|
|
|
|
|
+ str +=`<li id="${drive.id}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root:/${drive.name}', 'One Drive')">${drive.name}</li>`
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
str += `</ul>
|
|
str += `</ul>
|
|
|
</li>`;
|
|
</li>`;
|
|
|
- if (joinedTeams) {
|
|
|
|
|
|
|
+ if (joinedTeams && joinedTeams.teams.length > 0) {
|
|
|
joinedTeams.teams.forEach((team)=>{
|
|
joinedTeams.teams.forEach((team)=>{
|
|
|
|
|
+ const items = joinedTeams.items[team.id];
|
|
|
|
|
+ let siteId;
|
|
|
|
|
+ let path;
|
|
|
|
|
+ if (items[0]) {
|
|
|
|
|
+ let joinedRef = items[0].parentReference;
|
|
|
|
|
+ siteId = joinedRef.siteId;
|
|
|
|
|
+ path = joinedRef.path;
|
|
|
|
|
+ }
|
|
|
str += `<li>
|
|
str += `<li>
|
|
|
- <input type="checkbox" checked="false" id="joined-team" onclick="showJoinedTeam('${team.id}')">
|
|
|
|
|
- <label for="joined-team">${team.displayName}</label>
|
|
|
|
|
|
|
+ <input type="checkbox" checked="false" id="${siteId}" value="${siteId}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${team.displayName}', '${siteId}')">
|
|
|
|
|
+ <label for="${siteId}"><img width="24" height="24" src="data:image/jpeg;base64, ${team.image}" alt="이미지"> ${team.displayName}</label>
|
|
|
<ul>`;
|
|
<ul>`;
|
|
|
- console.log('팀 : ',team);
|
|
|
|
|
- const items = joinedTeams.items[team.id];
|
|
|
|
|
|
|
+
|
|
|
if (items && items.length > 0) {
|
|
if (items && items.length > 0) {
|
|
|
items.forEach((item)=>{
|
|
items.forEach((item)=>{
|
|
|
- str +=`<li id="${item.id}" onclick="showJoinedTeam('${item.id}', '${item.name}')">${item.name}</li>`
|
|
|
|
|
|
|
+ str +=`<li id="${item.id}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root:/${item.name}', '${team.displayName}')">${item.name}</li>`
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
str +=`</ul></li>`;
|
|
str +=`</ul></li>`;
|
|
@@ -620,28 +574,85 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function showOneDrive() {
|
|
|
|
|
|
|
+ function showOneDrive(event) {
|
|
|
|
|
+ $('.tree.group input[type="checkbox"]').prop('checked', true);
|
|
|
|
|
+ event.target.checked = false;
|
|
|
|
|
+ if ($(event.target).next().text() === $('.panel').children().first().text()) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
callApi('get', '/me/drive/root/children', (jsonData)=>{
|
|
callApi('get', '/me/drive/root/children', (jsonData)=>{
|
|
|
- drawOneDrive(jsonData, 'One Drive', null);
|
|
|
|
|
|
|
+ drawOneDrive(jsonData, '', $(event.target).next().text());
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function DrawOneDriveFile(id, name) {
|
|
function DrawOneDriveFile(id, name) {
|
|
|
- callApi('get', '/me/drive/items/' + id, (jsonData)=>{
|
|
|
|
|
|
|
+ callApi('get', '/me/drive/items/' + id + '/children', (jsonData)=>{
|
|
|
drawOneDrive(jsonData, name, id);
|
|
drawOneDrive(jsonData, name, id);
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function showJoinedTeam(id, name) {
|
|
|
|
|
|
|
+ function showJoinedTeam(id, name, event) {
|
|
|
|
|
+ // const $target = $(event.target);
|
|
|
|
|
+ // const isChecked = $target.is(':checked');
|
|
|
|
|
+ // if (isChecked) {
|
|
|
|
|
+ // $target.prop('checked', 'checked');
|
|
|
|
|
+ // return;
|
|
|
|
|
+ // }
|
|
|
|
|
+ $('.tree.group input[type="checkbox"]').prop('checked', true);
|
|
|
|
|
+ event.target.checked = false;
|
|
|
|
|
+ if ($(event.target).next().text() === $('.panel').children().first().text()) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
callApi('get', '/groups/'+id+'/drive/items/root/children', (jsonData)=>{
|
|
callApi('get', '/groups/'+id+'/drive/items/root/children', (jsonData)=>{
|
|
|
- drawFileList(jsonData, name, id);
|
|
|
|
|
|
|
+ drawFileList(jsonData, name, id, $(event.target));
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
function sorting(type) {
|
|
function sorting(type) {
|
|
|
- console.log($('.head-'+type));
|
|
|
|
|
- console.log(_selectedData);
|
|
|
|
|
- // _selectedData.sort(function (a, b){
|
|
|
|
|
|
|
+ const $sortingColumn = $('.head-'+type);
|
|
|
|
|
+ const isSelected = $sortingColumn.hasClass('on');
|
|
|
|
|
+ if ($('.file-title > div.on')[0]) {
|
|
|
|
|
+ $('.file-title > div.on').removeClass('on');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (_selectedData.value.length > 0) {
|
|
|
|
|
+ let first = 1;
|
|
|
|
|
+ let end = -1;
|
|
|
|
|
+ if (!isSelected) {
|
|
|
|
|
+ $sortingColumn.addClass('on');
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ first = -1;
|
|
|
|
|
+ end = 1;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ _selectedData.value.sort(function (a, b){
|
|
|
|
|
+ return a[type] > b[type] ? first : a[type] === b[type] ? 0 : end;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if ($('.panel').children().first().text() === 'One Drive') {
|
|
|
|
|
+ drawOneDrive(_selectedData);
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ $('.tree.group input[type="checkbox"]').on('change', function(event){
|
|
|
|
|
+ console.log($(this));
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ function downloadItems(downloadUrl, name, event) {
|
|
|
|
|
+ event.preventDefault();
|
|
|
|
|
+ event.stopPropagation();
|
|
|
|
|
+ const link = document.createElement('a');
|
|
|
|
|
+ link.download = name;
|
|
|
|
|
+ link.href = downloadUrl;
|
|
|
|
|
+ $('body').append(link);
|
|
|
|
|
+ link.click();
|
|
|
|
|
+ $(link).remove();
|
|
|
|
|
+ window.URL.revokeObjectURL(downloadUrl);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- // })
|
|
|
|
|
- }
|
|
|
|
|
</script>
|
|
</script>
|
