1
0
nixfiles/hosts/storage-2/filemanager/index.html

322 lines
8.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>storage.clerie.de</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Roboto;
color: #222222;
}
header {
}
header > .title {
padding: 3em;
min-height: 3em;
}
header > .title > h1 {
color: #222222;
}
header > .menu {
padding: 1em 3em;
}
header > .menu > button,
header > .menu > input {
height: 3em;
min-width: 3em;
}
main {
}
.listing {
display: flex;
width: 100%;
flex-direction: column;
}
.listing-item {
padding: 1em 3em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-height: 3em;
border-top-style: solid;
border-width: 1px;
border-color: #F0F0F0;
}
.listing-item:hover {
background-color: rgb(245, 245, 245);
}
.listing-item > .detail {
flex: auto;
}
.listing-item > .detail > a {
display: block;
height: 100%;
width: 100%;
}
.listing-item button {
height: 3em;
min-width: 3em;
}
button, input[type="file"] {
border-style: none;
background-color: transparent;
min-width: 3em;
height: 3em;
border-radius: 0.2em;
}
button:hover {
background-color: #DDDDDD;
}
.loading {
margin: auto;
}
@keyframes spinner {
0% {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
100% {
transform: translate3d(-50%, -50%, 0) rotate(360deg);
}
}
.loading::before {
display: block;
animation: 1.5s linear infinite spinner;
animation-play-state: inherit;
border: solid 5px #cfd0d1;
border-bottom-color: #1c87c9;
border-radius: 50%;
content: "";
height: 40px;
width: 40px;
transform: translate3d(-50%, -50%, 0);
will-change: transform;
}
</style>
</head>
<body>
<header>
<div class="title">
<h1 id="path"></h1>
</div>
<div class="menu">
<button onclick="createDirectoryButton();">📁 +</button>
<input id="files" type="file" multiple> <button onclick="uploadFilesButton();"></button>
</div>
</header>
<main>
<div id="listing"></div>
</main>
<script>
let path_field = document.getElementById("path");
let listing_field = document.getElementById("listing");
let base_path = "/_";
if (window.location.hash === "") {
window.location.hash = "#/";
}
let current_path = window.location.hash.substring(1);
function deleteFile(path) {
fetch(base_path + path, {
method: 'DELETE',
})
.then((response) => {
console.log(response);
if (!response.ok) {
throw new Error("Removing file failed");
}
})
.then(() => {
listFiles();
});
}
function deleteFileButton(path) {
if (confirm("Are you sure you wanna delete " + path + "?")) {
deleteFile(path);
}
}
function createDirectory(path) {
fetch(base_path + path, {
method: 'MKCOL',
})
.then((response) => {
console.log(response);
if (!response.ok) {
throw new Error("Creating directory failed");
}
})
.then(() => {
listFiles();
});
}
function createDirectoryButton() {
let dir_name = prompt("Directory name");
if (dir_name !== null) {
createDirectory(current_path + dir_name + "/");
}
}
function uploadFile(path, file) {
fetch(base_path + path, {
method: 'PUT',
body: file,
})
.then((response) => {
console.log(response);
if (!response.ok) {
throw new Error("Upload failed");
}
})
.then(() => {
listFiles();
});
}
function uploadFilesButton() {
let files = document.getElementById("files").files;
for (let i = 0; i < files.length; i++) {
uploadFile(current_path + files[i].name, files[i]);
}
document.getElementById("files").value = "";
}
function moveFile(old_path, new_path) {
fetch(base_path + old_path, {
method: 'MOVE',
headers: {
'Destination': base_path + new_path,
},
})
.then((response) => {
console.log(response);
if (!response.ok) {
throw new Error("Rename file failed");
}
})
.then(() => {
listFiles();
});
}
function moveFileButton(path) {
let new_path = prompt("New file path", path);
moveFile(path, new_path);
}
function renameFileButton(path) {
let new_name = prompt("New file name");
moveFile(path, current_path + new_name);
}
function copyFile(path, new_path) {
fetch(base_path + path, {
method: 'COPY',
headers: {
'Destination': base_path + new_path,
},
})
.then((response) => {
console.log(response);
if (!response.ok) {
throw new Error("Copy file failed");
}
})
.then(() => {
listFiles();
});
}
function duplicateFileButton(path) {
let new_path = prompt("New file path", path);
copyFile(path, new_path);
}
function listFiles() {
listing_field.innerHTML = '<div class="loading"></div>';
path_field.innerHTML = '<a href="#/">⌂</a>';
let path_blocks = current_path.split('/').slice(1);
for (let i = 0; i < path_blocks.length; i++) {
path_field.innerHTML += ' / <a href="#/' + path_blocks.slice(0, i+1).join('/') + '/">' + path_blocks[i] + '</a>';
}
fetch(base_path + current_path)
.then((response) => {
console.log(response);
if (!response.ok) {
throw new Error("Can't fetch directory");
}
return response.json();
})
.then((listing) => {
console.log(listing);
let out = '<div class="listing">';
for (let i = 0; i < listing.length; i++) {
let listing_path = current_path + encodeURIComponent(listing[i]["name"]);
let listing_link = "#";
let listing_icon = "";
if (listing[i]["type"] === "directory") {
listing_path += '/';
listing_link = '#' + listing_path;
listing_icon = "📁";
}
else {
listing_link = base_path + listing_path;
}
out += '<div class="listing-item">'
+ '<div class="detail">'
+ '<a href="' + listing_link + '">' + listing_icon + " " + listing[i]["name"] + '</a>'
+ '</div>'
+ '<div class="options">'
+ '<button onclick="renameFileButton(\'' + listing_path + '\');" alt="rename">✎</button>'
+ '<button onclick="duplicateFileButton(\'' + listing_path + '\');">●●</button>'
+ '<button onclick="moveFileButton(\'' + listing_path + '\');">⇨</button>'
+ '<button onclick="deleteFileButton(\'' + listing_path + '\');">❌</button>'
+ '</div>'
+ '</div>';
}
out += '</div>';
listing_field.innerHTML = out;
});
}
listFiles();
window.onhashchange = () => {
current_path = window.location.hash.substring(1);
listFiles();
}
</script>
</body>
</html>