feat: implement frontend function

서승완
Commit aabe5744c5b63628bc66a79152889d74e94084fe aabe5744 1 parent 0652cd92
Showing 2 changed files with 116 additions and 17 deletions
khubox-front/index.html
khubox-front/static/js/main.js
--- a/khubox-front/index.html
View file @aabe574
+++ b/khubox-front/index.html
View file @aabe574
@@ -14,12 +14,12 @@
             data-target="#sidebarMenu">
         <span class="navbar-toggler-icon"></span>
     </button>
-    <input class="form-control form-control-dark w-100" type="text" placeholder="KhuBox에서 검색">
+    <div class="w-100"></div>
-    <ul class="navbar-nav px-3">
+<!--    <ul class="navbar-nav px-3">-->
-        <li class="nav-item text-nowrap">
+<!--        <li class="nav-item text-nowrap">-->
-            <a class="nav-link" href="#!/settings">설정</a>
+<!--            <a class="nav-link" href="#!/settings">설정</a>-->
-        </li>
+<!--        </li>-->
-    </ul>
+<!--    </ul>-->
     <ul class="navbar-nav px-3">
         <li class="nav-item text-nowrap">
             <a class="nav-link" href="#!/logout">로그아웃</a>
@@ -161,12 +161,13 @@
                 </div>
             </div>
         </main>
+        <input type="hidden" id="this-group-id">
         <main id="manage_group" style="display:none;" role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
             <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3">
                 <h1 class="h2">그룹 설정</h1>
             </div>
             <div class="accordion" id="manage_group_accord">
-                <div class="card">
+                <div id="card-1" style="display:none;" class="card">
                     <div class="card-header">
                         <h2 class="mb-0">
                             <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#manage_group_accord1" aria-expanded="true" aria-controls="collapseOne">
@@ -183,16 +184,16 @@
                                     <small class="form-text text-muted">변경할 그룹명을 입력해주세요.</small>
                                     <small class="form-text text-muted">모든 그룹원에게 변경이 반영됩니다.</small>
                                 </div>
-                                <button type="button" class="btn btn-primary" onclick="GroupJoin();">변경</button>
+                                <button type="button" class="btn btn-primary" onclick="ChangeGroupName();">변경</button>
                             </form>
                         </div>
                     </div>
                 </div>
-                <div class="card">
+                <div id="card-2" style="display:none;" class="card">
                     <div class="card-header">
                         <h2 class="mb-0">
                             <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#manage_group_accord2" aria-expanded="false" aria-controls="collapseTwo">
-                                초대코드 조회 및 재발급
+                                초대코드 조회
                             </button>
                         </h2>
                     </div>
@@ -204,13 +205,11 @@
                                     <input type="text" class="form-control" id="group-invite-code" readonly>
                                     <small class="form-text text-muted">위의 초대코드를 입력하면 그룹원이 가입할 수 있습니다.</small>
                                 </div>
-                                <button type="button" class="btn btn-success" onclick="GroupCreate();">재발급</button>
-                                <small class="form-text text-muted">재발급할 경우 기존의 초대코드로는 더 이상 가입할 수 없습니다.</small>
                             </form>
                         </div>
                     </div>
                 </div>
-                <div class="card">
+                <div id="card-3" style="display:none;" class="card">
                     <div class="card-header">
                         <h2 class="mb-0">
                             <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#manage_group_accord3" aria-expanded="false" aria-controls="collapseTwo">
@@ -233,7 +232,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="card">
+                <div id="card-4" style="display:none;" class="card">
                     <div class="card-header">
                         <h2 class="mb-0">
                             <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#manage_group_accord4" aria-expanded="false" aria-controls="collapseTwo">
@@ -244,14 +243,14 @@
                     <div id="manage_group_accord4" class="collapse" data-parent="#manage_group_accord">
                         <div class="card-body">
                             <form>
-                                <button type="button" class="btn btn-warning" onclick="GroupCreate();">그룹 탈퇴</button>
+                                <button type="button" class="btn btn-warning" onclick="GroupExit();">그룹 탈퇴</button>
                                 <small class="form-text text-muted">탈퇴하면 그룹 내 파일에 접근할 수 없습니다.</small>
                                 <small class="form-text text-muted">초대코드를 받으면 재가입할 수 있습니다.</small>
                             </form>
                         </div>
                     </div>
                 </div>
-                <div class="card">
+                <div id="card-5" style="display:none;" class="card">
                     <div class="card-header">
                         <h2 class="mb-0">
                             <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#manage_group_accord5" aria-expanded="false" aria-controls="collapseTwo">
--- a/khubox-front/static/js/main.js
View file @aabe574
+++ b/khubox-front/static/js/main.js
View file @aabe574
@@ -6,6 +6,12 @@ $("body").on('dblclick', 'tr.single-file', function(e) {
 });
 const ProcessHash = () => {
+  $('#card-1').hide();
+  $('#card-2').hide();
+  $('#card-3').hide();
+  $('#card-4').hide();
+  $('#card-5').hide();
+
   $('#menu-me').removeClass('active');
   $('#menu-public').removeClass('active');
   $('#menu-starred').removeClass('active');
@@ -74,6 +80,7 @@ const ProcessHash = () => {
     $('#main-1').show();
     $('#main-2').show();
     $('#manage_group').show();
+    ProcessGroup();
   } else if (location.hash.indexOf('#!/files/') > -1) {
     ProcessMain();
     $('#main-1').show();
@@ -354,7 +361,7 @@ const GetStarredList = () => {
 const GoShareLink = (file_id) => {
   $('#share-pop').append(`
             <div class="alert alert-info alert-dismissible fade show" role="alert">
-                ${`http://localhost:63342/front/#!/files/${file_id}`}
+                ${`https://khubox.khunet.net/#!/files/${file_id}`}
                 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -785,3 +792,96 @@ const GroupCreate = () => {
     }
   });
 };
+
+const ChangeGroupName = () => {
+  const post_data = {
+    name: $('#change-group-name').val(),
+  };
+  $.ajax({
+    url: `https://khubox-api.khunet.net/groups/${$('#this-group-id').val()}`,
+    headers: {
+      'Authorization': `Bearer ${localStorage.getItem('token')}`,
+    },
+    type: 'PATCH',
+    data: JSON.stringify(post_data),
+    success: (response) => {
+      if (response.result === true) {
+        alert('성공적으로 변경되었습니다.');
+        getGroups();
+      } else {
+        alert(response.error)
+      }
+    }
+  });
+};
+
+const ProcessGroup = () => {
+  const group_id = location.hash.substring(10);
+  $('#this-group-id').val(group_id);
+
+  $.ajax({
+    url: `https://khubox-api.khunet.net/groups/${group_id}`,
+    headers: {
+      'Authorization': `Bearer ${localStorage.getItem('token')}`,
+    },
+    type: 'GET',
+    success: (response) => {
+      if (response.result === true) {
+        $('#change-group-name').val(response.data.name);
+        if (response.data.is_owner === true) {
+          $('#group-invite-code').val(response.data.invite_code);
+          $('#card-1').show();
+          $('#card-2').show();
+          // $('#card-3').show();
+          // $('#card-5').show();
+        } else {
+          // $('#card-4').show();
+        }
+
+      } else {
+        alert(response.error)
+      }
+    }
+  });
+
+};
+
+const GroupExit = () => {
+  //
+  // $.ajax({
+  //   url: 'https://khubox-api.khunet.net/users/me',
+  //   headers: {
+  //     'Authorization': `Bearer ${localStorage.getItem('token')}`,
+  //   },
+  //   type: 'GET',
+  //   success: (response) => {
+  //     if (response.result === true) {
+  //
+  //
+  //       $.ajax({
+  //         url: `https://khubox-api.khunet.net/groups/${$('#this-group-id').val()}/users/${response.data.id}`,
+  //         headers: {
+  //           'Authorization': `Bearer ${localStorage.getItem('token')}`,
+  //         },
+  //         type: 'DELETE',
+  //         success: (response) => {
+  //           if (response.result === true) {
+  //             alert('성공적으로 탈퇴되었습니다.');
+  //             getGroups();
+  //           } else {
+  //             alert(response.error)
+  //           }
+  //         }
+  //       });
+  //
+  //
+  //
+  //     } else {
+  //       alert(response.error);
+  //     }
+  //   }
+  // });
+
+
+
+};