2020-1-CloudComputing-E / E_Team_KhuBox

Go to a project
Toggle navigation Toggle navigation pinning
서승완
aabe5744 1 parent 0652cd92
Builds for 1 pipeline canceled in 29 seconds

feat: implement frontend function

Inline Side-by-side
Showing 2 changed files with 116 additions and 17 deletions
......@@ -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에서 검색">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#!/settings">설정</a>
</li>
</ul>
<div class="w-100"></div>
<!-- <ul class="navbar-nav px-3">-->
<!-- <li class="nav-item text-nowrap">-->
<!-- <a class="nav-link" href="#!/settings">설정</a>-->
<!-- </li>-->
<!-- </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">
......
......@@ -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);
// }
// }
// });
};
......