Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeardedManZhao
BeardedManZhao committed Apr 26, 2024
1 parent 25cb230 commit 7303dfc
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 18 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ const indexConfig = {

## 更新记录

### 1.0.6 版本 开发

- 新增文件上传进度显示支持

### 1.0.5 版本 发布

- 修复了文件编辑器上传文件的问题
Expand Down
21 changes: 17 additions & 4 deletions web/FileExplorer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
<body>
<div class="parent">
<div class="div1">
<div class="progress-bar" style="display:inline-block; width: 69%; height: 20%; transform: translateY(50%)">
<div class="all-progress-bar progress-bar"
style="display:inline-block; width: 69%; height: 20%; transform: translateY(50%)">

</div>
<label>
Expand All @@ -26,7 +27,10 @@
<div>
<img alt="logo" class="icon-navigation" src="image/logo.png">
</div>
<div id="show_area" title="diskMirror-front 版本：点击查看前端界面历史包" onclick="window.open('https://github.com/BeardedManZhao/diskMirror-front/releases')" style="text-align: center"> 1.0.5</div>
<div id="show_area" onclick="window.open('https://github.com/BeardedManZhao/diskMirror-front/releases')"
style="text-align: center"
title="diskMirror-front 版本：点击查看前端界面历史包"> 1.0.6
</div>
<div class="button_list1">
<button class="item_Button" onclick="window.open('index.html')">新界面</button>
<button class="item_Button" id="showTransferDeposit_fileList_table_button"
Expand Down Expand Up @@ -59,12 +63,21 @@

</tbody>
</table>
<table class="wide-table" id="fileList_table">
<table class="wide-table" id="upload_fileList_table">
<thead>
<tr>
<th title="保存到盘镜中的文件的名字">写入文件的名称</th>
<th title="文件上传进度">上传任务的进度</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
<table class="wide-table" id="upload_fileList_table">
<table class="wide-table" id="fileList_table">

</table>

</div>
<div class="div4">
<a class="okClick" href="#" id="diskMirrorBackPath"></a>
Expand Down
6 changes: 5 additions & 1 deletion web/css/FileExplorer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,14 @@ body {
height: 100%;
}

#transferDeposit_fileList_table {
#transferDeposit_fileList_table, #upload_fileList_table {
display: none;
}

#upload_fileList_table .progress-bar {
height: 1em;
}

.parent {
width: 100%;
height: 100%;
Expand Down
12 changes: 12 additions & 0 deletions web/js/DiskMirrorFront.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,4 +194,16 @@ class DiskMirrorFront {
static videoStr(src, style = 'width:50vw') {
return "<video src='" + src + "' style='" + style + "' controls/>";
}

/**
* 清空对象
* @param obj 需要被清空的对象
*/
static clearObject(obj) {
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
delete obj[key];
}
}
}
}
47 changes: 47 additions & 0 deletions web/js/diskMirror.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -464,6 +464,53 @@ class DiskMirror {
});
}

/**
* 获取指定空间的所有的进度条
* @param userId {int|string} 指定要获取到的文件进度数据对应的空间id
* @param okFun {function} 操作成功之后的回调函数 输入是被文件进度的json对象
* @param errorFun {function} 操作失败之后的回调函数 输入是错误信息
* @param checkFun {function} 操作前的检查函数 输入是请求参数对象，如果返回的是一个false 则代表检查失败不继续操作
*/
getAllProgressBar(userId, okFun = undefined, errorFun = (e) => 'res' in e ? alert(e['res']) : alert(e), checkFun = undefined) {
if (userId === undefined || okFun === undefined) {
const err = "您必须要输入 userId 和 okFun 参数才可以进行文件对象的获取！";
if (errorFun !== undefined) {
errorFun(err);
} else {
console.error(err);
}
return
}
if (checkFun !== undefined && !checkFun(userId)) {
return;
}
axios.defaults.withCredentials = true;
// 开始获取
axios(
{
method: 'post',
url: this.diskMirrorUrl + this.getController() + '/getAllProgressBar',
params: {
id: userId
}
}
).then(function (res) {
// 处理成功
if (okFun !== undefined) {
okFun(res.data);
} else {
console.info(res.data);
}
}).catch(function (err) {
// 处理错误
if (errorFun !== undefined) {
errorFun(err);
} else {
console.error(err);
}
});
}

/**
* 向后端中查询文件转存情况
* @param params {{
Expand Down
2 changes: 1 addition & 1 deletion web/js/diskMirror.min.js
View file

Large diffs are not rendered by default.

72 changes: 60 additions & 12 deletions web/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,18 @@ let isShowTransferDeposit_fileList_table = false;

function showTransferDeposit_fileList_table(b) {
if (isShowTransferDeposit_fileList_table) {
document.querySelectorAll("#transferDeposit_fileList_table").forEach((element) => element.style.display = 'none');
document.querySelectorAll("#transferDeposit_fileList_table,#upload_fileList_table").forEach((element) => element.style.display = 'none');
b.innerText = ' 转存表';
isShowTransferDeposit_fileList_table = false;
} else {
document.querySelectorAll("#transferDeposit_fileList_table").forEach((element) => element.style.display = 'table');
document.querySelectorAll("#transferDeposit_fileList_table,#upload_fileList_table").forEach((element) => element.style.display = 'table');
b.innerText = ' 转存表'
isShowTransferDeposit_fileList_table = true;
}
}

const progressBar = new ProgressBar(document.querySelector(".progress-bar"), (now, max) => `您的盘镜空间使用量为：${DiskMirrorFront.formatBytes(now)}/${DiskMirrorFront.formatBytes(max)}；占比为：${(now / max * 100).toFixed(2)}%`);
const progressBar = new ProgressBar(document.querySelector(".all-progress-bar"), (now, max) => `您的盘镜空间使用量为：${DiskMirrorFront.formatBytes(now)}/${DiskMirrorFront.formatBytes(max)}；占比为：${(now / max * 100).toFixed(2)}%`);

let diskMirror = new DiskMirror(indexConfig.server);
// 获取到id 和 口令
const searchParams1 = [DiskMirrorFront.getLatestCookieValue('diskMirror_server_pass')]
Expand Down Expand Up @@ -201,6 +202,7 @@ window.onload = function () {
})

const transferDeposit_fileList_table = document.querySelector("#transferDeposit_fileList_table tbody");
const upload_fileList_table = document.querySelector("#upload_fileList_table tbody");

// 获取状态灯
const status_bar = document.getElementsByClassName("status_bar");
Expand All @@ -219,8 +221,25 @@ window.onload = function () {
})
}

// 进度字典
const progressDict = {};

// 设置字典自动清理 1分钟清理一次
setInterval(() => DiskMirrorFront.clearObject(progressDict), 60000)

// 转存查询
setInterval(() => {
const errorFun = (_) => {
document.querySelector("body").className = 'errorBody';
for (let statusBarElement of status_bar) {
statusBarElement.style.color = 'red';
statusBarElement.title = '目前无法获取到与服务器的通信！';
}
if (isShowTransferDeposit_fileList_table) {
jokerBoxPopUp.show('无法与转存状态服务连接，请检查网络或diskMirror服务器版本是否 >= 1.2.0')
}
}
// 转存表
diskMirror.transferDepositStatus({userId: userId, type: type}, (res) => {
const date = DiskMirrorFront.getDate(new Date());
document.querySelector("body").className = '';
Expand All @@ -246,16 +265,45 @@ window.onload = function () {
tr.appendChild(td1);
transferDeposit_fileList_table.appendChild(tr);
}
}, (_) => {
document.querySelector("body").className = 'errorBody';
for (let statusBarElement of status_bar) {
statusBarElement.style.color = 'red';
statusBarElement.title = '目前无法获取到与服务器的通信！';
}
if (isShowTransferDeposit_fileList_table) {
jokerBoxPopUp.show('无法与转存状态服务连接，请检查网络或diskMirror服务器版本是否 >= 1.2.0')
}, errorFun);
if (!isShowTransferDeposit_fileList_table) {
// 如果看不到转存和进度表 就没必要获取进度表
return;
}
// 进度表
diskMirror.getAllProgressBar(userId, (res) => {
upload_fileList_table.innerHTML = '';
for (const fileName in res) {
const p = res[fileName];
const progressDictElement = progressDict[fileName];
if (progressDictElement) {
upload_fileList_table.appendChild(progressDictElement[0])
progressDictElement[1].setProgressByValue(p['count'], p['maxCount'], 'linear-gradient(to right, rgba(255, 255, 255, 0.5), #8c00ff)', 'linear-gradient(to right, rgba(255, 255, 255, 0.5), #00ff00)')
} else {
const tr = document.createElement("tr");
tr.className = "row0";
const td0 = document.createElement("td");
const span0 = document.createElement("span");
span0.innerText = '';
span0.className = 'load-icon'
const span1 = document.createElement("span");
span1.innerText = ' ' + fileName;
td0.appendChild(span0);
td0.appendChild(span1);
tr.appendChild(td0);
// 获取进度对象 进度对象示例：{"diskMirror-1.2.1-javadoc.jar":{"count":98304,"maxCount":214246.0,"progressId":"diskMirror-1.2.1-javadoc.jar","spaceId":"1"}}
const htmlDivElement = document.createElement("div");
htmlDivElement.className = 'progress-bar'
const td1 = document.createElement("td");
td1.appendChild(htmlDivElement);
tr.appendChild(td1);
progressDict[fileName] = [tr, new ProgressBar(htmlDivElement, (now, max) => `${fileName} 上传进度为：${DiskMirrorFront.formatBytes(now)}/${DiskMirrorFront.formatBytes(max)}；占比为：${(now / max * 100).toFixed(2)}%`)];
progressDict[fileName][1].setProgressByValue(p['count'], p['maxCount'], 'linear-gradient(to right, rgba(255, 255, 255, 0.5), #8c00ff)', 'linear-gradient(to right, rgba(255, 255, 255, 0.5), #00ff00)')
upload_fileList_table.appendChild(tr);
}
}
});
}, () => {
})
}, 5000)

document.querySelector("#diskMirrorBackPath").addEventListener("click", () => fsList.toBackPath());
Expand Down

0 comments on commit 7303dfc

Please sign in to comment.