161 lines
3.9 KiB
HTML
161 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Downloads Manager</title>
|
|
|
|
<style>
|
|
.container {
|
|
max-width: 1920px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
}
|
|
|
|
.header {
|
|
max-width: 900px;
|
|
width: 100%;
|
|
margin: 24px auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
#delete-form {
|
|
max-width: 900px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 0;
|
|
}
|
|
|
|
.item {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.item:hover {
|
|
background-color: #aaa;
|
|
}
|
|
|
|
.item a {
|
|
all: unset;
|
|
cursor: pointer;
|
|
color: #000;
|
|
}
|
|
|
|
.item_directory a {
|
|
color: blue;
|
|
}
|
|
|
|
.item__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
border: none;
|
|
background-color: #b00420;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="title">Downloads Manager</h1>
|
|
|
|
<div class="header">
|
|
<div>
|
|
<label>
|
|
<input type="checkbox" name="directories-first" />
|
|
Directories first
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<select name="sort">
|
|
<option value="oldest" selected>Oldest</option>
|
|
<option value="newest">Newest</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="post" action="/delete" id="delete-form">
|
|
<ul class="list">
|
|
{{range .Entries}}
|
|
<li class="item {{if .IsDir}}item_directory{{else}}item_file{{end}}">
|
|
<div class="item__left">
|
|
<input type="checkbox" name="files" value="{{.Path}}" />
|
|
<a href="{{.Path}}">{{.Name}}</a>
|
|
</div>
|
|
<span>{{.ModifiedAt}}</span>
|
|
</li>
|
|
{{end}}
|
|
</ul>
|
|
<button type="submit" class="submit-btn">Delete selected files</button>
|
|
|
|
<script>
|
|
const deleteForm = document.querySelector("form#delete-form");
|
|
deleteForm.addEventListener("submit", (e) => {
|
|
const ok = confirm("are you sure?");
|
|
if (!ok) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
});
|
|
|
|
const directoriesCheckbox = document.querySelector(
|
|
'input[name="directories-first"]',
|
|
);
|
|
const sortSelect = document.querySelector('select[name="sort"]');
|
|
|
|
directoriesCheckbox.addEventListener("change", (e) => {
|
|
const params = new URLSearchParams(location.search);
|
|
if (e.target.checked) {
|
|
params.set("directoriesFirst", "");
|
|
} else {
|
|
params.delete("directoriesFirst");
|
|
}
|
|
location.search = params.toString();
|
|
});
|
|
|
|
sortSelect.addEventListener("change", (e) => {
|
|
const params = new URLSearchParams(location.search);
|
|
params.set("sort", e.target.value);
|
|
location.search = params.toString();
|
|
});
|
|
|
|
window.addEventListener("load", () => {
|
|
const params = new URLSearchParams(location.search);
|
|
if (params.has("directoriesFirst")) {
|
|
directoriesCheckbox.checked = true;
|
|
}
|
|
|
|
if (params.has("sort")) {
|
|
sortSelect.value = params.get("sort");
|
|
}
|
|
});
|
|
</script>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|