Skip to content

Commit

Permalink
frontend: share
Browse files Browse the repository at this point in the history
  • Loading branch information
@PotatoChipsNinja
PotatoChipsNinja committed Nov 29, 2020
1 parent e653f10 commit 78f98c0
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 45 deletions.
42 changes: 42 additions & 0 deletions public/disk.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,48 @@
</div>
</div>

<div class="modal" id="create-share-modal" style="width: 25rem;">
<div class="modal-content" style="padding: 0 24px;">
<p style="font-size: 120%; margin-bottom: 2rem;">创建分享</p>
<div class="input-field">
<input disabled type="text" class="validate" id="share-file-name">
<label for="share-file-name" id="share-file-name-label">分享文件</label>
</div>

<label style="margin-right: 1rem;">
<input class="with-gap" name="share-type" value="open" type="radio" checked />
<span>公开分享</span>
</label>
<label>
<input class="with-gap" name="share-type" value="secret" type="radio" />
<span>私密分享</span>
</label>

<div class="input-field" id="share-password-field">
<input id="share-password" type="text" onfocus="$(this).removeClass('invalid');">
<label for="share-password" id="share-password-label">分享密码</label>
<span class="helper-text" data-error="密码不能为空"></span>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0)" class="modal-close waves-effect waves-green btn-flat" style="color: #ef6c00; margin: 0;">取消</a>
<a href="javascript:void(0)" class="waves-effect waves-green btn-flat" style="color: #ef6c00; margin: 0;" onclick="createShare();">创建</a>
</div>
</div>

<div class="modal" id="share-success-modal" style="width: 25rem;">
<div class="modal-content" style="padding: 0 24px;">
<p style="font-size: 120%; margin-bottom: 2rem;">创建分享</p>
<div class="input-field">
<input type="text" id="share-link" readonly>
<label for="share-link" id="share-link-label">分享链接</label>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0)" class="modal-close waves-effect waves-green btn-flat" style="color: #ef6c00; margin: 0;">关闭</a>
</div>
</div>

<input type="file" style="display: none;" id="file">

<script type="text/javascript" src="/js/materialize.min.js"></script>
Expand Down
61 changes: 60 additions & 1 deletion public/js/disk.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ $(document).ready(() => {
M.Tooltip.init($('.tooltipped'), {});
M.Modal.init($('#create-dir-modal'), { endingTop: '30%' });
M.Modal.init($('#upload-modal'), { endingTop: '20%' });
M.Modal.init($('#create-share-modal'), { endingTop: '30%' });
M.Modal.init($('#share-success-modal'), { endingTop: '30%' });
});

function setPath(p) {
Expand Down Expand Up @@ -93,8 +95,9 @@ function select() {
$('#op-list').append(`<li><a href="javascript:void(0)" onclick="rm('${selected.children()[1].lastChild.innerText}', 'dir');"><i class="material-icons">delete</i></a></li>`);
} else {
$('#file-size').text(` (${selected.children()[2].innerText})`);
$('#op-list').append(`<li><a href="javascript:void(0)" onclick="rm('${selected.children()[1].lastChild.innerText}', 'file');"><i class="material-icons">delete</i></a></li>`);
$('#op-list').append(`<li><a href="javascript:void(0)" onclick="share('${selected.children()[1].lastChild.innerText}');"><i class="material-icons">share</i></a></li>`);
$('#op-list').append(`<li><a href="javascript:void(0)" onclick="dl('${selected.children()[1].lastChild.innerText}');"><i class="material-icons">cloud_download</i></a></li>`);
$('#op-list').append(`<li><a href="javascript:void(0)" onclick="rm('${selected.children()[1].lastChild.innerText}', 'file');"><i class="material-icons">delete</i></a></li>`);
}
$('#sub-menu').fadeIn(100);
}
Expand All @@ -108,6 +111,60 @@ function clearSelect() {
}
}

function share(filename) {
shareFile = filename;
openShare = true;
$('#share-file-name-label').addClass('active');
$('#share-file-name').val(filename);
$("input[name='share-type']").eq(0).prop('checked', true);
$('#share-password-field').hide();
$('#share-password').val('');
$('#share-password-label').removeClass('active');
M.Modal.getInstance($('#create-share-modal')).open();
}

$("input[name='share-type']").click(() => {
if ($("input[name='share-type']:checked").val() == 'secret') {
$('#share-password-field').show();
openShare = false
} else {
$('#share-password-field').hide();
$('#share-password').val('');
$('#share-password-label').removeClass('active');
openShare = true;
}
});

function createShare() {
let password = $('#share-password').val()
if (!openShare && !password) {
$('#share-password').addClass('invalid');
return;
}

let postData = { name: shareFile, path: path };
if (!openShare) {
postData.password = password;
}
$.post({
url: '/api/share/create',
headers: { Authorization: 'Bearer ' + token },
data: postData,
success: (res) => {
M.Modal.getInstance($('#create-share-modal')).close();
$('#share-link-label').addClass('active');
$('#share-link').val(`${window.location.protocol}//${window.location.host}${res.shareURL}`);
M.Modal.getInstance($('#share-success-modal')).open();
},
error: (res) => {
let code = res.responseJSON.code;
if (code == 101) {
window.location.href = '/login';
}
}
});
}

function dl(filename) {
$.get({
url: '/api/disk/download',
Expand Down Expand Up @@ -281,6 +338,8 @@ var path = '/';
var sort = 0;
var selected;
var uploadList = [];
var shareFile;
var openShare = true;
if (!token) {
window.location.href = '/login';
}
Expand Down
59 changes: 49 additions & 10 deletions public/js/share.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@ function loadList() {
headers: { Authorization: 'Bearer ' + token },
success: (res) => {
$('#content').empty();
let item;
shareList = res.shares;
let item, showPassEle;
for (let i = 0; i < res.count; i++) {
item = res.shares[i]
item = shareList[i]
showPassEle = `
<a href="javascript:void(0)" class="center-align circle op-button tooltipped" data-position="bottom" data-tooltip="查看密码" onclick="showPassword(${i});">
<i class="material-icons">visibility</i>
</a>
`;
$('#content').append(`
<div class="card">
<div class="card-content valign-wrapper">
Expand All @@ -17,19 +23,52 @@ function loadList() {
</div>
</div>
<div class="card-action right-align">
<a href="javascript:void(0)" class="center-align circle op-button tooltipped" data-position="bottom" data-tooltip="查看链接">
<a href="javascript:void(0)" class="center-align circle op-button tooltipped" data-position="bottom" data-tooltip="查看链接" onclick="showLink(${i});">
<i class="material-icons">link</i>
</a>
<a href="javascript:void(0)" class="center-align circle op-button tooltipped" data-position="bottom" data-tooltip="查看密码">
<i class="material-icons">visibility</i>
</a>
<a href="javascript:void(0)" class="center-align circle op-button tooltipped" data-position="bottom" data-tooltip="取消分享">
${item.password ? showPassEle : ''}
<a href="javascript:void(0)" class="center-align circle op-button tooltipped" data-position="bottom" data-tooltip="取消分享" onclick="cancel(${i});">
<i class="material-icons">delete</i>
</a>
</div>
</div>
`);
}

if (!res.count) {
$('#content').append(`
<h4 style="color: rgba(0, 0, 0, 0.5);"><i class="material-icons">error</i> 您目前没有任何分享</h4>
`);
}
},
error: (res) => {
let code = res.responseJSON.code;
if (code == 101) {
window.location.href = '/login';
}
}
});
}

function showLink(index) {
$('#share-link-label').addClass('active');
$('#share-link').val(`${window.location.protocol}//${window.location.host}${shareList[index].link}`);
M.Modal.getInstance($('#link-modal')).open();
}

function showPassword(index) {
$('#share-password-label').addClass('active');
$('#share-password').val(shareList[index].password);
M.Modal.getInstance($('#password-modal')).open();
}

function cancel(index) {
$.post({
url: '/api/share/cancel',
headers: { Authorization: 'Bearer ' + token },
data: { UUID: shareList[index].UUID },
success: (res) => {
loadList();
},
error: (res) => {
let code = res.responseJSON.code;
Expand All @@ -41,13 +80,13 @@ function loadList() {
}

$(document).ready(() => {
M.Dropdown.init($('.dropdown-trigger'), {});
M.Tooltip.init($('.tooltipped'), {});
M.Modal.init($('#create-dir-modal'), { endingTop: '30%' });
M.Modal.init($('#upload-modal'), { endingTop: '20%' });
M.Modal.init($('#link-modal'), { endingTop: '30%' });
M.Modal.init($('#password-modal'), { endingTop: '30%' });
});

var token = localStorage.getItem('token');
var shareList = [];
if (!token) {
window.location.href = '/login';
}
Expand Down
49 changes: 15 additions & 34 deletions public/share.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,50 +68,31 @@
</div>
</div>

<div id="content">
<div class="card">
<div class="card-content valign-wrapper">
<i class="material-icons circle center-align item-icon">insert_drive_file</i>
<div class="share-info">
<span class="card-title grey-text text-darken-4 file-name">a.txt</span>
<p class="file-time">2020-06-23</p>
</div>
</div>
<div class="card-action right-align">
<a href="javascript:void(0)" class="center-align circle op-button tooltipped" data-position="bottom" data-tooltip="查看链接">
<i class="material-icons">link</i>
</a>
<a href="javascript:void(0)" class="center-align circle op-button tooltipped" data-position="bottom" data-tooltip="查看密码">
<i class="material-icons">visibility</i>
</a>
<a href="javascript:void(0)" class="center-align circle op-button tooltipped" data-position="bottom" data-tooltip="取消分享">
<i class="material-icons">delete</i>
</a>
</div>
</div>
</div>
<div id="content"></div>

<div class="modal" id="create-dir-modal" style="width: 25rem;">
<div class="modal" id="link-modal" style="width: 25rem;">
<div class="modal-content" style="padding: 0 24px;">
<p style="font-size: 120%;">创建目录</p>
<p style="font-size: 120%; margin-bottom: 2rem;">查看分享链接</p>
<div class="input-field">
<input id="dir-name" type="text" onfocus="clearErr(this);">
<label for="dir-name" id="dir-name-label">目录名</label>
<span class="helper-text" id="dir-name-helper" data-error=""></span>
<input type="text" id="share-link" readonly>
<label for="share-link" id="share-link-label">分享链接</label>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0)" class="modal-close waves-effect waves-green btn-flat" style="color: #ef6c00; margin: 0;">取消</a>
<a href="javascript:void(0)" class="waves-effect waves-green btn-flat" style="color: #ef6c00; margin: 0;" onclick="createDir();">创建</a>
<a href="javascript:void(0)" class="modal-close waves-effect waves-green btn-flat" style="color: #ef6c00; margin: 0;">关闭</a>
</div>
</div>

<div class="modal" id="upload-modal" style="max-height: 60%;">
<div class="modal" id="password-modal" style="width: 25rem;">
<div class="modal-content" style="padding: 0 24px;">
<!--<h4>传输管理</h4>-->
<p style="font-size: 120%;">传输管理</p>
<ul class="collection">
</ul>
<p style="font-size: 120%; margin-bottom: 2rem;">查看分享密码</p>
<div class="input-field">
<input type="text" id="share-password" readonly>
<label for="share-password" id="share-password-label">分享密码</label>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0)" class="modal-close waves-effect waves-green btn-flat" style="color: #ef6c00; margin: 0;">关闭</a>
</div>
</div>

Expand Down

0 comments on commit 78f98c0

Please sign in to comment.