serv/dufs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve ui

Browse source
This commit is contained in:
sigoden 2022-06-03 06:49:55 +08:00
parent 07f4e7d0f2
commit 0a3d9c391f
2 changed files with 56 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
assets/index.css
View file

@ -97,38 +97,46 @@ body {
padding: 0 1em; padding: 0 1em;
} }
.main th { .uploaders-table th,
.paths-table th {
text-align: left; text-align: left;
font-weight: unset; font-weight: unset;
color: #5c5c5c; color: #5c5c5c;
white-space: nowrap; white-space: nowrap;
} }
.main td { .uploaders-table td,
.paths-table td {
white-space: nowrap; white-space: nowrap;
} }
.main .cell-name { .uploaders-table .cell-name,
width: 400px; .paths-table .cell-name {
width: 500px;
} }
.main .cell-mtime { .uploaders-table .cell-status {
width: 80px;
padding-left: 0.6em;
}
.paths-table .cell-actions {
width: 60px;
display: flex;
padding-left: 0.6em;
}
.paths-table .cell-mtime {
width: 120px; width: 120px;
padding-left: 0.6em; padding-left: 0.6em;
} }
.main .cell-size { .paths-table .cell-size {
text-align: right; text-align: right;
width: 70px; width: 70px;
padding-left: 0.6em; padding-left: 0.6em;
} }
.main .cell-actions {
width: 60px;
display: flex;
padding-left: 0.6em;
}
.path svg { .path svg {
height: 100%; height: 100%;
@ -158,7 +166,7 @@ body {
padding-left: 0.4em; padding-left: 0.4em;
} }
.uploaders { .uploaders-table {
padding: 0.5em 0; padding: 0.5em 0;
} }

42
assets/index.js
View file

@ -1,11 +1,11 @@
let $tbody, $uploaders; let $pathsTable, $pathsTableBody, $uploadersTable;
let baseDir; let baseDir;
class Uploader { class Uploader {
idx; idx;
file; file;
name; name;
$elem; $uploadStatus;
static globalIdx = 0; static globalIdx = 0;
constructor(file, dirs) { constructor(file, dirs) {
this.name = [...dirs, file.name].join("/"); this.name = [...dirs, file.name].join("/");
@ -19,12 +19,16 @@ class Uploader {
if (file.name == baseDir + ".zip") { if (file.name == baseDir + ".zip") {
url += "?unzip"; url += "?unzip";
} }
$uploaders.insertAdjacentHTML("beforeend", ` $uploadersTable.insertAdjacentHTML("beforeend", `
<div class="uploader path"> <tr id="upload${idx}" class="uploader">
<div><svg height="16" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M6 5H2V4h4v1zM2 8h7V7H2v1zm0 2h7V9H2v1zm0 2h7v-1H2v1zm10-7.5V14c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1h7.5L12 4.5zM11 5L8 2H1v12h10V5z"></path></svg></div> <td class="path cell-name">
<a href="${url}" id="file${idx}">${name} (0%)</a> <div>${getSvg("File")}</div>
</div>`); <a href="${url}">${name}</a>
this.$elem = document.getElementById(`file${idx}`); </td>
<td class="cell-status" id="uploadStatus${idx}"></td>
</tr>`);
$uploadersTable.classList.remove("hidden");
this.$uploadStatus = document.getElementById(`uploadStatus${idx}`);
const ajax = new XMLHttpRequest(); const ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", e => this.progress(e), false); ajax.upload.addEventListener("progress", e => this.progress(e), false);
@ -45,15 +49,15 @@ class Uploader {
progress(event) { progress(event) {
const percent = (event.loaded / event.total) * 100; const percent = (event.loaded / event.total) * 100;
this.$elem.innerHTML = `${this.name} (${percent.toFixed(2)}%)`; this.$uploadStatus.innerHTML = `${percent.toFixed(2)}%`;
} }
complete() { complete() {
this.$elem.innerHTML = `${this.name}`; this.$uploadStatus.innerHTML = `✓`;
} }
fail() { fail() {
this.$elem.innerHTML = `<strike>${this.name}</strike>`; this.$uploadStatus.innerHTML = `✗`;
} }
} }
@ -110,7 +114,7 @@ function addPath(file, index) {
${actionDelete} ${actionDelete}
</td>` </td>`
$tbody.insertAdjacentHTML("beforeend", ` $pathsTableBody.insertAdjacentHTML("beforeend", `
<tr id="addPath${index}"> <tr id="addPath${index}">
<td class="path cell-name"> <td class="path cell-name">
<div>${getSvg(file.path_type)}</div> <div>${getSvg(file.path_type)}</div>
@ -134,6 +138,10 @@ async function deletePath(index) {
}); });
if (res.status === 200) { if (res.status === 200) {
document.getElementById(`addPath${index}`).remove(); document.getElementById(`addPath${index}`).remove();
DATA.paths[index] = null;
if (!DATA.paths.find(v => !!v)) {
$pathsTable.classList.add("hidden");
}
} else { } else {
throw new Error(await res.text()) throw new Error(await res.text())
} }
@ -224,19 +232,23 @@ function formatSize(size) {
} }
function ready() { function ready() {
$tbody = document.querySelector(".main tbody"); $pathsTable = document.querySelector(".paths-table")
$uploaders = document.querySelector(".uploaders"); $pathsTableBody = document.querySelector(".paths-table tbody");
$uploadersTable = document.querySelector(".uploaders-table");
addBreadcrumb(DATA.breadcrumb); addBreadcrumb(DATA.breadcrumb);
if (Array.isArray(DATA.paths)) { if (Array.isArray(DATA.paths)) {
const len = DATA.paths.length; const len = DATA.paths.length;
if (len > 0) {
$pathsTable.classList.remove("hidden");
}
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
addPath(DATA.paths[i], i); addPath(DATA.paths[i], i);
} }
} }
if (DATA.allow_upload) { if (DATA.allow_upload) {
dropzone(); dropzone();
document.querySelector(".upload-control").classList.remove(["hidden"]); document.querySelector(".upload-control").classList.remove("hidden");
document.getElementById("file").addEventListener("change", e => { document.getElementById("file").addEventListener("change", e => {
const files = e.target.files; const files = e.target.files;
for (let file of files) { for (let file of files) {