AIP
/
AipApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830
							<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 onclick="menuOpen(event, 'mk-items')">
                      <div>새로만들기</div>
                      <div class="mk-items click-menu">
                        <div onclick="mkdir()"><img src="/static/images/folder.png" width="20" height="20" alt="문서 이미지">&nbsp;폴더</div>
                        <div><img src="/static/images/docx.svg" width="20" height="20" alt="문서 이미지">&nbsp;Word 문서</div>
                        <div><img src="/static/images/xlsx.svg" width="20" height="20" alt="문서 이미지">&nbsp;Excel 통합 문서</div>
                        <div><img src="/static/images/pptx.svg" width="20" height="20" alt="문서 이미지">&nbsp;PowerPoint 프레젠테이션</div>
                      </div> 
                    </div>
                    <div onclick="menuOpen(event, 'upload-items')">
                      <div>업로드</div>
                      <div class="upload-items click-menu">
                        <div style="width: 160px;">폴더</div>
                        <div style="width: 160px;">파일</div>
                      </div> 
                    </div>
                    <div onclick="refreshDrive()">새로고침</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>
  </body>
</html>
<script>
  const groupId = '3df73dac-a8bc-4dd0-9159-fdb2c696c067';
  const groupMap = new Map();
  let _selectedData = [];
  let _listData = [];
  $(()=>{
    microsoftTeams.appInitialization.notifySuccess();
    getGroupList();

    window.oncontextmenu = function () {
        return false;
    };
    window.addEventListener('click', function() {
      $('.click-menu').css('display', 'none');
    })

  });

  function menuOpen(event, className) {
    event.preventDefault();
    event.stopPropagation();
    $('.click-menu:not(.'+className+')').css('display', 'none');
    $('.' + className).toggle();
  }

  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(jsonData.value[0].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 (['txt'].includes(ext)) {
                ext = 'txt';
              }
              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';
              }

              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)+ '일';
            }

            // let method = `findOneDriveChildrenItems('${obj.id}')`;(siteId, path, name, value)
            let method = `siteDriveChildrenItems('${obj.parentReference.siteId}','${obj.parentReference.path + '/' + obj.name}','${name}', null, event)`;
            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');
            }
          });

          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 onclick="deleteItem()">삭제</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;
                let path = '';
                if (refData.path) {
                  path = refData.path +'/' + parentData.name;
                }
                panelStr = drawPath(path, refData.siteId, name);
                $oneDriveBtn.off('click');
                
                if (parentData.webUrl){
                  $oneDriveBtn.on('click', ()=>{
                    window.open(parentData.webUrl);
                  });
                }

                $fileContent.html(`<div class="empty-box">
                                    <img src="/static/images/empty_folder_v2.svg" alt="이미지">
                                    <div>이 폴더는 비어 있습니다.</div>
                                  </div>`)
            }
        }
        
        panel.html(panelStr);
    }

    //새로고침 이벤트
    function refreshDrive() {
        const selectedDrive = $('.panel-item.on');
        if (selectedDrive[0]) {
          selectedDrive.removeClass('on');
          selectedDrive.click();
        }
    }

    //삭제 이벤트
    function deleteItem() {
      const checkArr = $('.file-content input[type="checkbox"]');
      const checkedArr = [];
      let siteId = getSitesId();

      if (!siteId) return alert('그룹 정보를 확인 할 수 없습니다.');
      
      if (checkArr.length > 0) {
        for (let ii = 0; ii < checkArr.length; ii++) {
          if (checkArr.eq(ii).is(':checked')) {
            const title = checkArr.eq(ii).parent().next().text();
            const team = _listData.joinedTeams;
            const idx = team.teams.findIndex(obj => obj.sharePoint.siteId === siteId);
            if (idx >= 0) {
              const sameIndex = team.items[team.teams[idx].id].findIndex(obj => obj.id === checkArr.eq(ii).val());
              if (sameIndex >= 0) {
                return alert('채널 정보는 삭제하실수 없습니다.');
              };
            }

            checkedArr.push(checkArr.eq(ii).val());
          }
        }
        if (checkedArr.length === 0) {
          alert('선택된 정보가 없습니다. 삭제하실 파일을 먼저 선택해주세요.');
        }
        else {
          if (confirm('선택된 파일을 삭제하시겠습니까?')) {
              $.ajax({
                method:'post',
                url : "/deleteItems",
                data: {
                  siteId: siteId,
                  itemIds : JSON.stringify(checkedArr),
                },
                success: (res)=> {
                  if (res.success === 'S') {
                      const selectedDrive = $('.panel-item.on');
                      selectedDrive.removeClass('on');
                      selectedDrive.click();
                  }
                  alert(res.message);
                },
                error: (error)=> {
                  console.log(error);
                }
              })
            }
            else {
              alert('선택된 그룹 정보가 없습니다. 선택 그룹을 확인해 주세요.');
            }
        }
      }
    }

    function drawPath(path, siteId, name) {
      let imgSrc = '';
      let panelStr = '';
      if ($('#'+siteId + '_li').find('img')[0]) {
        imgSrc = $('#'+siteId + '_li').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" id="${siteId}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${name}', '${siteId}', event)">`;
          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}', null, event)`;
              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" id="${siteId}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${name}', '${siteId}', event)">`;
      if (imgSrc) {
        panelStr += `<img style="margin-right:5px;" width="24" height="24" src="${imgSrc}" alt="이미지">`
      }

      panelStr += ` ${name}</span>`;

      return panelStr;
    }

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

    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 transfer = e.originalEvent.dataTransfer;
            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")) {
            //     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 siteDriveChildrenItems(siteId, path, name, value, event) {
      event.preventDefault();
      event.stopPropagation();
      if ($(event.target).hasClass('on')) {
        return;
      }
      if (value) {
        // $('.tree.group input').prop('checked', true);
        $('input[value="'+value+'"]').prop('checked', false);
        if ($('.panel').children().text() === name) {
          return;
        }
      }
      console.log('/sites/' +siteId + path);
      callApi('get', '/sites/' +siteId + path, (jsonData)=>{
        if (jsonData && jsonData.id) {
          if (jsonData.folder && jsonData.folder.childCount === 0) {
              if (path.indexOf('root:') < 0) {
                path = '';
              }
              const panelStr = drawPath(path, siteId, name);
              const $oneDriveBtn = $('.one-drive-button');
              const $fileContent = $('.file-content');
              const $panel = $('.panel');
              $oneDriveBtn.off('click');
              if (jsonData.webUrl){
                $oneDriveBtn.on('click', ()=>{
                  window.open(jsonData.webUrl);
                });
              }

              $fileContent.html(`<div class="empty-box">
                                  <img src="/static/images/empty_folder_v2.svg" alt="이미지">
                                  <div>이 폴더는 비어 있습니다.</div>
                                </div>`);
              $panel.html(panelStr);
              return;
          }
          callApi('get', '/sites/' +siteId +'/drive/items/'+jsonData.id+'/children', (childrenData)=>{
            drawDriveFiles(childrenData, jsonData, name);
          },null); 
        }
      })
    }

    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) {
          _listData = jsonData;
          const groupImageUrl = '/_api/siteiconmanager/getsitelogo?type=1';
          const {oneDrive, joinedTeams, sites} = jsonData;
          let parentId = '';
          let siteId = '';
          let str = "";
        
          
          if (joinedTeams && joinedTeams.teams.length > 0) {
            str += `<li>
                      <input id="my-team" type="checkbox">
                      <label for="my-team">내 Teams 그룹</label>
                      <ul class="group-section">
                    `
            joinedTeams.teams.forEach((team)=>{
              const items = joinedTeams.items[team.id];
              let siteId = team.sharePoint.siteId;
              // onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${team.displayName}', '${siteId}', event)"
              str += `<li id="${siteId}_li">
                        <input type="checkbox" checked="false" id="${siteId}_check" value="${siteId}">
                        <label for="${siteId}_check"><img width="24" height="24" src="${team.sharePoint.siteUrl}${groupImageUrl}" alt="이미지">&nbsp;${team.displayName}</label>
                        <ul>`;
                        
                        if (items && items.length > 0) {
                          items.forEach((item)=>{
                            str +=`<li id="${item.id}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root:/${item.name}', '${team.displayName}', null, event)">${item.name}</li>`
                          })
                        }
              str +=`</ul></li>`;
            })
            str += '</ul></li>';
          }
          if (oneDrive) {
            const {teams, items} = oneDrive;
            const sharePoint = teams.sharePoint;
            siteId = sharePoint.siteId;
              // str += `<div>
              //           <input type="checkbox" checked="false" id="${siteId}" value="${siteId}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', 'One Drive', '${siteId}', event)">
              //           <label for="${siteId}"><img width="24" height="24" src="${sharePoint.siteUrl}${groupImageUrl}" alt="그룹 이미지">&nbsp;One Drive</label>
              //         </div>`;
              str += `<div id="${siteId}_li" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', 'One Drive', '${siteId}', event)">
                        <img width="24" height="24" src="${sharePoint.siteUrl}${groupImageUrl}" alt="그룹 이미지">&nbsp;One Drive
                      </div>`;
          }

          if (sites) {
              let {teams, items} = sites;
              if (!Array.isArray(teams)) {
                teams = [teams];
              }
              for (let team of teams) {
                // const items = sites.items[team.id];
                let siteId = team.sharePoint.siteId;
                let path;
                let imageUrl;
                  // str += `<li>
                  //         <input type="checkbox" checked="false" id="${siteId}" value="${siteId}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${team.displayName}', '${siteId}', event)">
                  //         <label for="${siteId}"><img width="24" height="24" src="${team.sharePoint.siteUrl}${groupImageUrl}" alt="이미지">&nbsp;${team.displayName}</label>
                  //         <ul>`;
                  //         if (items && items.length > 0) {
                  //           items.forEach((item)=>{
                  //             str +=`<li id="${item.id}" onclick="siteDriveChildrenItems('${siteId}', '/drive/root:/${item.name}', '${team.displayName}', null, event)">${item.name}</li>`
                  //           })
                  //         }
                  // str +=`</ul></li>`;
                  str += `
                        <div id="${siteId}_li" onclick="siteDriveChildrenItems('${siteId}', '/drive/root', '${team.displayName}', '${siteId}', event)">
                          <img width="24" height="24" src="${team.sharePoint.siteUrl}${groupImageUrl}" alt="그룹 이미지">&nbsp;${team.displayName}
                        </div>`;
              }

          }
          group.append($(str));
      }
    }


    function sorting(type) {
      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);
  }

  function makeFolder() {
    const $folderName = $('#folder_name');
    const name = $folderName.val();
    if (!name || !name.trim()) {
      $folderName.focus();
      return alert("폴더명을 입력해주세요.");
    }
    let siteId = getSitesId();
    if (siteId === null) {
      return alert('선택된 그룹 정보를 찾을 수 없습니다. 생성할 그룹을 선택해주세요.');
    }
    
    const groupIndex = _listData.joinedTeams.teams.findIndex(obj => obj.sharePoint.siteId === siteId);
    const pathArr = $('.panel').children();

    if (groupIndex >= 0 && $('.panel').children().length === 1) {
        return alert('채널 리스트를 먼저 선택해 주세요.');
    }
    let sitePath = '/drive/root'
    if (pathArr.length > 1) {
      sitePath += ':';
      for (let ii = 0; ii < pathArr.length; ii++) {
        const path = pathArr.eq(ii).text();
        if (ii !== 0 && path !== " > ") {
          sitePath += "/" + path; 
        }
      }
    }

    $.ajax({
      method: 'post',
      data : {
        siteId : siteId,
        path : sitePath,
        param : JSON.stringify({
          name: name,
          folder: { },
          '@microsoft.graph.conflictBehavior': 'rename'
        })
      },
      url : '/makeFolder',
      success: (res) => {
        alert('폴더가 생성되었습니다.\n폴더명 : '+ res.name);
        $('.modal').remove();
        const selectDrive = $('.panel-item.on');
        selectDrive.removeClass('on');
        selectDrive.click();
        
      },
      error: (error) => {
        console.log('==============error=============\n');
        console.log(error);
      }
      
    })
  }

  function mkdir() {
    const modalContainer = $(
      `<div class="modal" style="display: flex;">
          <div class="modal-box">
              <div class="header">
                <div class="title">폴더 생성</div>
                <div class="x-button">
                  <span><img src="/static/images/x-button.png" width="15" height="15" alt="닫기 버튼" onclick="modalClose()"></span>
                </div>
              </div>
              <div class="modal-content">
                <div>폴더명</div>
                <input type="text" name="file_name" id="folder_name" value="">
              </div>
              <div class="button-box">
                  <div class="name-btn" onclick="makeFolder()">만들기</div>
                  <div class="name-btn" onclick="modalClose()">취소</div>
              </div>
          </div>
      </div>`);
      $('body').append(modalContainer);
    
    // callApi('post', '/sites/' +siteId +'/drive/items/'++'/children', (jsonData)=>{
    //   console.log(jsonData);
    //   callApi('post', '')
    // })
    
  }

  function modalClose(){
      $('.modal').remove();
  }

  function getSitesId() {
    let siteId = null;
    if ($('.panel').children().first()[0]) {
        siteId = $('.panel').children().first().attr('id');
    }
    return siteId;
  }

  function changeNames() {
    const modalContainer = $(
      `<div class="modal" style="display: flex;">
          <div class="modal-box">
              <div class="header">
                <div class="title">이름 바꾸기</div>
                <div class="x-button">
                  <span><img src="/static/images/x-button.png" width="15" height="15" alt="닫기 버튼"></span>
                </div>
              </div>
              <div class="modal-content">
                <div>이름</div>
                <input type="text" name="file_name" id="" value="">
              </div>
              <div class="button-box">
                  <div class="name-btn">이름 바꾸기</div>
                  <div class="name-btn">취소</div>
              </div>
          </div>
      </div>`);
  }

</script>