AIP
/
AipApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647
							<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/static/styles/custom.css?v=05" />
    <script
      src="https://res.cdn.office.net/teams-js/2.17.0/js/MicrosoftTeams.min.js"
      integrity="sha384-xp55t/129OsN192JZYLP0rGhzjCF9aYtjY0LVtXvolkDrBe4Jchylp56NrUYJ4S2"
      crossorigin="anonymous"
    ></script>
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.2.1/js/msal.js"></script>
    <script src="/static/scripts/teamsapp.js"></script>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <title>Microsoft Teams Tab</title>
    <style>
    </style>
  </head>

  <body>
      <div class="wrap">
        <div class="content">
            <nav>
                <div class="tree">
                    <li class="">
                        <input type="checkbox" id="file">
                        <label for="file">내 OFFICE 365 파일</label>
                    </li>
                </div>
                <div class="total">모두</div>
                <div class="tree group"></div>
            </nav>
            <section>
                <div class="menu">
                    <div class="sub-menu">
                        <img src="/static/images/menu-icon.png" width="30" height="30" alt="메뉴 아이콘">
                    </div>
                    <div>새로만들기</div>
                    <div>업로드</div>
                    <div>새로고침</div>
                    <div class="one-drive-button">OneDrive에서 열기</div>
                </div>
                <div class="panel"></div>
                <div class="file-title">
                    <div><img src="/static/images/file.png" width="20" alt="파일"></div>
                    <div class="head-name" onclick="sorting('name')">이름</div>
                    <div class="head-size" onclick="sorting('size')">용량</div>
                    <div class="head-lastModifiedDateTime" onclick="sorting('lastModifiedDateTime')">수정된 날짜</div>
                    <div class="head-lastModifiedBy.user.displayName" onclick="sorting('lastModifiedBy.user.displayName')">수정한 사람</div>
                    <div class="head-label" onclick="sorting('label')">민감도</div>
                </div>
                <div class="file-content"></div>
            </section>
        </div>
    </div>
    <div class="modal">
        <div class="modal-content">
            <div class="title">이름 바꾸기</div>
            <input type="text" name="file_name" id="" value="">.pdf
            <div>
                <div class="name-btn">이름 바꾸기</div>
                <div class="name-btn">취소</div>
            </div>
        </div>
    </div>
  </body>
</html>
<script>
  const groupId = '3df73dac-a8bc-4dd0-9159-fdb2c696c067';
  const groupMap = new Map();
  let _selectedData = [];
  $(()=>{
    microsoftTeams.appInitialization.notifySuccess();
    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 () {
        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');
                }
              });

              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);
                }
              });
            }
    }

    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/";
                $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 = '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);
                }
              });
        }
    }

    // callApi('get','/deviceManagement', (jsonData)=>{
    //     console.log(jsonData);
    // })

    function nameChange() {
        if ($('.file-content > .on .file_name')[0]) {
          console.log($('.file-content > .on .file_name').text());
        }
    }

    function dragAndDrop(driveId) {
      const $fileContent = $('.file-content');
      $fileContent.off('dragover');
      $fileContent.off('dragleave');
      $fileContent.off('drop');

      $fileContent.on('dragover', function(e){
          e.preventDefault();
          $(this).css('background-color', '#eee');
      });
      $fileContent.on('dragleave', function(e){
          $(this).css('background-color', '#f5f5f5');
      })

      $fileContent.on("drop", function(e){
            e.preventDefault();
            $(this).css('background-color', '#f5f5f5');
            const file = e.originalEvent.dataTransfer.files[0];
            encryptFile(file, driveId);
            // if (file && file.type.startsWith("image")) {
            //     displayImage(file);
            // }
      });
    }

    function encryptFile(file, driveId) {
      const extArr = [ 
        'lnk', 'exe', 'com', 'cmd', 'bat', 'dll', 'ini', 
        'pst', 'sca', 'drm', 'sys', 'cpl', 'inf', 'drv', 
        'dat', 'tmp', 'msp', 'msi', 'pdb', 'jar'
      ]
      if (file && file.name) {
        const ext = file.name.substring(file.name.lastIndexOf('.') + 1);
        if (extArr.includes(ext)) {
          const modal = `<div class="modal error" style="display: flex;">
                            <div style="display:flex; border:1px solid red; flex-direction: column; padding:20px;justify-content:center;width:400px;height:120px; background-color:white;">
                                <div style='width:100%;margin-bottom:10px; height:40px;display:flex;justify-content:space-between; align-items:center; font-weight: bold; font-size: 18px;'>
                                  <div style="">파일 형식 오류</div>
                                  <div onclick="modalClose()" style="cursor:pointer; user-select:none;">x</div>
                                </div>
                                <div>
                                  암호화 할수 없는 형식의 파일입니다.<br>
                                  파일명 : ${file.name}
                                </div>
                            </div>
                        </div>`;
          $('body').append($(modal));
        }

        uploadFiles(itemId)
      }

    }

    function modalClose() {
      if ($('.modal.error')[0]){
        $('.modal.error').remove();
      }
    }


    function callApi(type, uri, callBackMethod, args, params) {
        $.ajax({
            method: 'post',
            url : "/api-"+type,
            data: {
              api_uri: uri,
              param : JSON.stringify(params),
            },
            success: (res)=> {
              callBackMethod(res, args);
            },
            error: (error)=> {
              console.log(error);
            }
        });
    }

    function makeFolder(type, uri, scopes, callBackMethod, args, params) {
      $.ajax({
            method: 'post',
            url : "/api-"+type,
            data: {
              api_uri: uri,
              scopes : scopes,
              param : params,
            },
            success: (res)=> {
              callBackMethod(res, args);
            },
            error: (error)=> {
              console.log(error);
            }
      });
    }

    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);
    }
    // $.ajax({
    //   url: '/test',
    //   method : 'post',
    //   success: function(res){
    //     console.log(res);
    //   },
    //   error: function(error) {
    //     console.log(error);
    //   }
    // })

    function getVolume(amount) {
      const tb = 1099511627776;
      const gb = 1073741824;
      const mb = 1048576;
      const kb = 1024;
      if (!isNaN(Number(amount)) && amount > 0) {
        if (amount >= tb) {
          amount = (amount/tb).toFixed(2) + 'TB';
        }
        else if (amount >= gb){
          amount = (amount/gb).toFixed(2) + 'GB';
        }
        else if (amount >= mb){
          amount = (amount/mb).toFixed(2) + 'MB';
        }
        else if (amount >= kb){
          amount = (amount/kb).toFixed(2) + 'KB';
        }
        else {
          amount += "Byte";
        }
      }

      return amount;
    }

    function uploadFiles(itemId) {
      //

      $.ajax({
            method: 'post',
            url : "/api-post",
            data: {
              api_uri: '/groups/'+groupId+'/drive/items/'+itemId+'/content',
              scopes : 'Files.ReadWrite',
              param : params,
            },
            success: (res)=> {
              callBackMethod(res, args);
            },
            error: (error)=> {
              console.log(error);
            }
      });
    }

    function getGroupList() {
      $.ajax({
          method: 'post',
          url : "/getGroupList",
          success: (res)=> {
            drawList(res);
          },
          error: (error)=> {
            console.log(error);
          }
      })
    }

    function drawList(jsonData) {
      const group = $('.group');
      group.empty();
      if (jsonData) {
          const {oneDrive, joinedTeams, sites} = jsonData;
          let str = `<li>
                      <input type="checkbox" checked="false" id="my-one-drive" onclick="showOneDrive()">
                      <label for="my-one-drive">One Drive</label>
                      <ul>`;
                      if (oneDrive && oneDrive.length > 0) {
                        oneDrive.forEach((drive)=>{
                          str +=`<li id="${drive.id}" onclick="DrawOneDriveFile('${drive.id}', '${drive.name}')">${drive.name}</li>`
                        })
                      }
              str += `</ul>
                    </li>`;
              if (joinedTeams) {
                joinedTeams.teams.forEach((team)=>{
                  str += `<li>
                            <input type="checkbox" checked="false" id="joined-team" onclick="showJoinedTeam('${team.id}')">
                            <label for="joined-team">${team.displayName}</label>
                            <ul>`;
                            console.log('팀 : ',team);
                            const items = joinedTeams.items[team.id];
                            if (items && items.length > 0) {
                              items.forEach((item)=>{
                                str +=`<li id="${item.id}" onclick="showJoinedTeam('${item.id}', '${item.name}')">${item.name}</li>`
                              })
                            }
                  str +=`</ul></li>`;
                })
              }
              group.append($(str));
      }
    }

    function showOneDrive() {
      callApi('get', '/me/drive/root/children', (jsonData)=>{
        drawOneDrive(jsonData, 'One Drive', null);
      })
    }

    function DrawOneDriveFile(id, name) {
      callApi('get', '/me/drive/items/' + id, (jsonData)=>{
        drawOneDrive(jsonData, name, id);
      })
    }

    function showJoinedTeam(id, name) {
      callApi('get', '/groups/'+id+'/drive/items/root/children', (jsonData)=>{
        drawFileList(jsonData, name, id);
      })
    }
    function sorting(type) {
      console.log($('.head-'+type));
      console.log(_selectedData);
      // _selectedData.sort(function (a, b){

      // })
    }
</script>