mirror of
https://github.com/sigoden/dufs.git
synced 2026-04-09 00:59:02 +03:00
chore: move src/assets out of src
This commit is contained in:
sigoden
@@ -1,167 +0,0 @@
|
||||
html {
|
||||
font-family: -apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
|
||||
line-height: 1.5;
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 1em 1em 0;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.breadcrumb > a {
|
||||
color: #0366d6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* final breadcrumb */
|
||||
.breadcrumb > b {
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
.breadcrumb > .separator {
|
||||
color: #586069;
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
|
||||
.breadcrumb svg {
|
||||
height: 100%;
|
||||
fill: rgba(3,47,98,0.5);
|
||||
padding-right: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
.toolbox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 246px;
|
||||
height: 22px;
|
||||
background-color: #fafafa;
|
||||
transition: all .15s;
|
||||
border: 1px #ddd solid;
|
||||
border-radius: 15px;
|
||||
margin: 0 0 2px 10px;
|
||||
}
|
||||
|
||||
.searchbar #search {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
padding: 1px;
|
||||
font-family: helvetica neue,luxi sans,Tahoma,hiragino sans gb,STHeiti,sans-serif;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.searchbar .icon {
|
||||
color: #9a9a9a;
|
||||
padding: 3px 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-control {
|
||||
cursor: pointer;
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
|
||||
.upload-control input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.main th {
|
||||
text-align: left;
|
||||
font-weight: unset;
|
||||
color: #5c5c5c;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.main td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.main .cell-name {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.main .cell-mtime {
|
||||
width: 120px;
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
.main .cell-size {
|
||||
text-align: right;
|
||||
width: 70px;
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
.main .cell-actions {
|
||||
width: 60px;
|
||||
display: flex;
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
|
||||
.path svg {
|
||||
height: 100%;
|
||||
fill: rgba(3,47,98,0.5);
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.path {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.path a {
|
||||
color: #0366d6;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.path a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding-left: 0.4em;
|
||||
}
|
||||
|
||||
.uploaders {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.uploader {
|
||||
padding-right: 1em;
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
__SLOT__
|
||||
</head>
|
||||
<body>
|
||||
<div class="head">
|
||||
<div class="breadcrumb"></div>
|
||||
<div class="toolbox">
|
||||
<div>
|
||||
<a href="?zip" title="Download folder as a .zip file">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="upload-control hidden" title="Upload files">
|
||||
<label for="file">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/></svg>
|
||||
</label>
|
||||
<input type="file" id="file" name="file" multiple>
|
||||
</div>
|
||||
</div>
|
||||
<form class="searchbar">
|
||||
<div class="icon">
|
||||
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>
|
||||
</div>
|
||||
<input id="search" name="q" type="text" maxlength="128" autocomplete="off" tabindex="1">
|
||||
<input type="submit" hidden />
|
||||
</form>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="uploaders">
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cell-name">Name</th>
|
||||
<th class="cell-mtime">Date modify</th>
|
||||
<th class="cell-size">Size</th>
|
||||
<th class="cell-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script>
|
||||
window.addEventListener("DOMContentLoaded", ready);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,247 +0,0 @@
|
||||
let $tbody, $uploaders;
|
||||
let baseDir;
|
||||
|
||||
class Uploader {
|
||||
idx;
|
||||
file;
|
||||
name;
|
||||
$elem;
|
||||
static globalIdx = 0;
|
||||
constructor(file, dirs) {
|
||||
this.name = [...dirs, file.name].join("/");
|
||||
this.idx = Uploader.globalIdx++;
|
||||
this.file = file;
|
||||
}
|
||||
|
||||
upload() {
|
||||
const { file, idx, name } = this;
|
||||
let url = getUrl(name);
|
||||
if (file.name == baseDir + ".zip") {
|
||||
url += "?unzip";
|
||||
}
|
||||
$uploaders.insertAdjacentHTML("beforeend", `
|
||||
<div class="uploader path">
|
||||
<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>
|
||||
<a href="${url}" id="file${idx}">${name} (0%)</a>
|
||||
</div>`);
|
||||
this.$elem = document.getElementById(`file${idx}`);
|
||||
|
||||
const ajax = new XMLHttpRequest();
|
||||
ajax.upload.addEventListener("progress", e => this.progress(e), false);
|
||||
ajax.addEventListener("readystatechange", () => {
|
||||
if(ajax.readyState === 4) {
|
||||
if (ajax.status == 200) {
|
||||
this.complete();
|
||||
} else {
|
||||
this.fail();
|
||||
}
|
||||
}
|
||||
})
|
||||
ajax.addEventListener("error", () => this.fail(), false);
|
||||
ajax.addEventListener("abort", () => this.fail(), false);
|
||||
ajax.open("PUT", url);
|
||||
ajax.send(file);
|
||||
}
|
||||
|
||||
progress(event) {
|
||||
const percent = (event.loaded / event.total) * 100;
|
||||
this.$elem.innerHTML = `${this.name} (${percent.toFixed(2)}%)`;
|
||||
}
|
||||
|
||||
complete() {
|
||||
this.$elem.innerHTML = `${this.name}`;
|
||||
}
|
||||
|
||||
fail() {
|
||||
this.$elem.innerHTML = `<strike>${this.name}</strike>`;
|
||||
}
|
||||
}
|
||||
|
||||
function addBreadcrumb(value) {
|
||||
const $breadcrumb = document.querySelector(".breadcrumb");
|
||||
const parts = value.split("/").filter(v => !!v);
|
||||
const len = parts.length;
|
||||
let path = "";
|
||||
for (let i = 0; i < len; i++) {
|
||||
const name = parts[i];
|
||||
if (i > 0) {
|
||||
path += "/" + name;
|
||||
}
|
||||
if (i === len - 1) {
|
||||
$breadcrumb.insertAdjacentHTML("beforeend", `<b>${name}</b>`);
|
||||
baseDir = name;
|
||||
} else if (i === 0) {
|
||||
$breadcrumb.insertAdjacentHTML("beforeend", `<a href="/"><b>${name}</b></a>`);
|
||||
} else {
|
||||
$breadcrumb.insertAdjacentHTML("beforeend", `<a href="${encodeURI(path)}">${name}</a>`);
|
||||
}
|
||||
$breadcrumb.insertAdjacentHTML("beforeend", `<span class="separator">/</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
function addPath(file, index) {
|
||||
const url = getUrl(file.name)
|
||||
let actionDelete = "";
|
||||
let actionDownload = "";
|
||||
if (file.path_type.endsWith("Dir")) {
|
||||
actionDownload = `
|
||||
<div class="action-btn">
|
||||
<a href="${url}?zip" title="Download folder as a .zip file">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
|
||||
</a>
|
||||
</div>`;
|
||||
} else {
|
||||
actionDownload = `
|
||||
<div class="action-btn" >
|
||||
<a href="${url}" title="Download file" download>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
|
||||
</a>
|
||||
</div>`;
|
||||
}
|
||||
if (DATA.allow_delete) {
|
||||
actionDelete = `
|
||||
<div onclick="deletePath(${index})" class="action-btn" id="deleteBtn${index}" title="Delete ${file.name}">
|
||||
<svg width="16" height="16" fill="currentColor"viewBox="0 0 16 16"><path d="M6.854 7.146a.5.5 0 1 0-.708.708L7.293 9l-1.147 1.146a.5.5 0 0 0 .708.708L8 9.707l1.146 1.147a.5.5 0 0 0 .708-.708L8.707 9l1.147-1.146a.5.5 0 0 0-.708-.708L8 8.293 6.854 7.146z"/><path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/></svg>
|
||||
</div>`;
|
||||
}
|
||||
let actionCell = `
|
||||
<td class="cell-actions">
|
||||
${actionDownload}
|
||||
${actionDelete}
|
||||
</td>`
|
||||
|
||||
$tbody.insertAdjacentHTML("beforeend", `
|
||||
<tr id="addPath${index}">
|
||||
<td class="path cell-name">
|
||||
<div>${getSvg(file.path_type)}</div>
|
||||
<a href="${url}" title="${file.name}">${file.name}</a>
|
||||
</td>
|
||||
<td class="cell-mtime">${formatMtime(file.mtime)}</td>
|
||||
<td class="cell-size">${formatSize(file.size)}</td>
|
||||
${actionCell}
|
||||
</tr>`)
|
||||
}
|
||||
|
||||
async function deletePath(index) {
|
||||
const file = DATA.paths[index];
|
||||
if (!file) return;
|
||||
|
||||
if (!confirm(`Delete \`${file.name}\`?`)) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(getUrl(file.name), {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (res.status === 200) {
|
||||
document.getElementById(`addPath${index}`).remove();
|
||||
} else {
|
||||
throw new Error(await res.text())
|
||||
}
|
||||
} catch (err) {
|
||||
alert(`Cannot delete \`${file.name}\`, ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function dropzone() {
|
||||
["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"].forEach(name => {
|
||||
document.addEventListener(name, e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
document.addEventListener("drop", e => {
|
||||
if (!e.dataTransfer.items[0].webkitGetAsEntry) {
|
||||
const files = e.dataTransfer.files.filter(v => v.size > 0);
|
||||
for (const file of files) {
|
||||
new Uploader(file, []).upload();
|
||||
}
|
||||
} else {
|
||||
const entries = [];
|
||||
const len = e.dataTransfer.items.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
entries.push(e.dataTransfer.items[i].webkitGetAsEntry());
|
||||
}
|
||||
addFileEntries(entries, [])
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function addFileEntries(entries, dirs) {
|
||||
for (const entry of entries) {
|
||||
if (entry.isFile) {
|
||||
entry.file(file => {
|
||||
new Uploader(file, dirs).upload();
|
||||
});
|
||||
} else if (entry.isDirectory) {
|
||||
const dirReader = entry.createReader()
|
||||
dirReader.readEntries(entries => addFileEntries(entries, [...dirs, entry.name]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function getUrl(name) {
|
||||
let url = location.href.split('?')[0];
|
||||
if (!url.endsWith("/")) url += "/";
|
||||
url += encodeURI(name);
|
||||
return url;
|
||||
}
|
||||
|
||||
function getSvg(path_type) {
|
||||
switch (path_type) {
|
||||
case "Dir":
|
||||
return `<svg height="16" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M13 4H7V3c0-.66-.31-1-1-1H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zM6 4H1V3h5v1z"></path></svg>`;
|
||||
case "File":
|
||||
return `<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>`;
|
||||
case "SymlinkDir":
|
||||
return `<svg height="16" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M13 4H7V3c0-.66-.31-1-1-1H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zM1 3h5v1H1V3zm6 9v-2c-.98-.02-1.84.22-2.55.7-.71.48-1.19 1.25-1.45 2.3.02-1.64.39-2.88 1.13-3.73C4.86 8.43 5.82 8 7.01 8V6l4 3-4 3H7z"></path></svg>`;
|
||||
default:
|
||||
return `<svg height="16" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M8.5 1H1c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V4.5L8.5 1zM11 14H1V2h7l3 3v9zM6 4.5l4 3-4 3v-2c-.98-.02-1.84.22-2.55.7-.71.48-1.19 1.25-1.45 2.3.02-1.64.39-2.88 1.13-3.73.73-.84 1.69-1.27 2.88-1.27v-2H6z"></path></svg>`;
|
||||
}
|
||||
}
|
||||
|
||||
function formatMtime(mtime) {
|
||||
if (!mtime) return ""
|
||||
const date = new Date(mtime);
|
||||
const year = date.getFullYear();
|
||||
const month = padZero(date.getMonth() + 1, 2);
|
||||
const day = padZero(date.getDate(), 2);
|
||||
const hours = padZero(date.getHours(), 2);
|
||||
const minutes = padZero(date.getMinutes(), 2);
|
||||
return `${year}/${month}/${day} ${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
function padZero(value, size) {
|
||||
return ("0".repeat(size) + value).slice(-1 * size)
|
||||
}
|
||||
|
||||
function formatSize(size) {
|
||||
if (!size) return ""
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
if (size == 0) return '0 Byte';
|
||||
const i = parseInt(Math.floor(Math.log(size) / Math.log(1024)));
|
||||
return Math.round(size / Math.pow(1024, i), 2) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function ready() {
|
||||
$tbody = document.querySelector(".main tbody");
|
||||
$uploaders = document.querySelector(".uploaders");
|
||||
|
||||
addBreadcrumb(DATA.breadcrumb);
|
||||
if (Array.isArray(DATA.paths)) {
|
||||
const len = DATA.paths.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
addPath(DATA.paths[i], i);
|
||||
}
|
||||
}
|
||||
if (DATA.allow_upload) {
|
||||
dropzone();
|
||||
document.querySelector(".upload-control").classList.remove(["hidden"]);
|
||||
document.getElementById("file").addEventListener("change", e => {
|
||||
const files = e.target.files;
|
||||
for (let file of files) {
|
||||
new Uploader(file, []).upload();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -32,9 +32,9 @@ use tokio_util::io::{ReaderStream, StreamReader};
|
||||
type Request = hyper::Request<Body>;
|
||||
type Response = hyper::Response<Body>;
|
||||
|
||||
const INDEX_HTML: &str = include_str!("assets/index.html");
|
||||
const INDEX_CSS: &str = include_str!("assets/index.css");
|
||||
const INDEX_JS: &str = include_str!("assets/index.js");
|
||||
const INDEX_HTML: &str = include_str!("../assets/index.html");
|
||||
const INDEX_CSS: &str = include_str!("../assets/index.css");
|
||||
const INDEX_JS: &str = include_str!("../assets/index.js");
|
||||
const BUF_SIZE: usize = 1024 * 16;
|
||||
|
||||
macro_rules! status {
|
||||
|
||||
Reference in New Issue
Block a user