Merge files and albums pages into user dashboard
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import AccountSettings from "./AccountSettings.svelte";
|
||||
import APIKeys from "./APIKeys.svelte";
|
||||
import Transactions from "./Transactions.svelte";
|
||||
@@ -6,20 +6,30 @@ import Subscription from "./Subscription.svelte";
|
||||
import ConnectApp from "./ConnectApp.svelte";
|
||||
import ActivityLog from "./ActivityLog.svelte";
|
||||
import DepositCredit from "./DepositCredit.svelte";
|
||||
import TabMenu from "../util/TabMenu.svelte";
|
||||
import TabMenu, { type Tab } from "../util/TabMenu.svelte";
|
||||
import BandwidthSharing from "./BandwidthSharing.svelte";
|
||||
import EmbeddingControls from "./EmbeddingControls.svelte";
|
||||
import PageBranding from "./PageBranding.svelte";
|
||||
import Dashboard from "./dashboard/Dashboard.svelte";
|
||||
import AffiliatePrompt from "./AffiliatePrompt.svelte";
|
||||
import FileManager from "./filemanager/FileManager.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { get_user, type User } from "../lib/PixeldrainAPI.mjs";
|
||||
|
||||
let pages = [
|
||||
let pages: Tab[] = [
|
||||
{
|
||||
path: "/user",
|
||||
title: "Dashboard",
|
||||
icon: "dashboard",
|
||||
component: Dashboard,
|
||||
hide_background: true,
|
||||
}, {
|
||||
path: "/user/filemanager",
|
||||
title: "My Files",
|
||||
icon: "",
|
||||
component: FileManager,
|
||||
hidden: true,
|
||||
hide_frame: true,
|
||||
}, {
|
||||
path: "/user/settings",
|
||||
title: "Settings",
|
||||
@@ -86,8 +96,13 @@ let pages = [
|
||||
component: ActivityLog,
|
||||
},
|
||||
]
|
||||
|
||||
let user = {} as User
|
||||
onMount(async () => {
|
||||
user = await get_user()
|
||||
})
|
||||
</script>
|
||||
|
||||
<TabMenu pages={pages} title="Welcome, {window.user.username}!"/>
|
||||
<TabMenu pages={pages} title="Welcome, {user.username}!"/>
|
||||
|
||||
<AffiliatePrompt always/>
|
||||
|
||||
@@ -43,11 +43,11 @@
|
||||
<h3>Exports</h3>
|
||||
|
||||
<div class="button_row">
|
||||
<a href="/user/export/files" class="button">
|
||||
<a href="/api/user/files?format=csv" class="button">
|
||||
<i class="icon">list</i>
|
||||
Export files to CSV
|
||||
</a>
|
||||
<a href="/user/export/lists" class="button">
|
||||
<a href="/api/user/lists?format=csv" class="button">
|
||||
<i class="icon">list</i>
|
||||
Export albums to CSV
|
||||
</a>
|
||||
|
||||
442
svelte/src/user_home/filemanager/DirectoryElement.svelte
Normal file
442
svelte/src/user_home/filemanager/DirectoryElement.svelte
Normal file
@@ -0,0 +1,442 @@
|
||||
<script>
|
||||
import { formatDataVolume, formatDate } from "../../util/Formatting.svelte";
|
||||
|
||||
// Main elements
|
||||
let directoryArea
|
||||
let nodeContainer
|
||||
let statusBar = "Loading..."
|
||||
|
||||
// Internal state, contains a list of all files in the directory, visible
|
||||
// files in the directory and the last scroll position. These are used for
|
||||
// rendering the file list correctly
|
||||
|
||||
// type: {icon, name, href, type, size, sizeLabel, dateCreated, selected}
|
||||
let allFiles = []
|
||||
|
||||
export const reset = () => {
|
||||
allFiles = []
|
||||
}
|
||||
|
||||
export const addFile = (id, icon, name, href, type, size, sizeLabel, dateCreated) => {
|
||||
allFiles.push({
|
||||
id: id,
|
||||
icon: icon,
|
||||
name: name,
|
||||
href: href,
|
||||
type: type,
|
||||
size: size,
|
||||
sizeLabel: sizeLabel,
|
||||
dateCreated: dateCreated,
|
||||
selected: false,
|
||||
filtered: false,
|
||||
visible: false,
|
||||
})
|
||||
}
|
||||
|
||||
export const renderFiles = () => {
|
||||
search(lastSearchTerm)
|
||||
}
|
||||
|
||||
export const getSelectedFiles = () => {
|
||||
let selectedFiles = []
|
||||
|
||||
for (let i in allFiles) {
|
||||
if (allFiles[i].selected) {
|
||||
selectedFiles.push(allFiles[i])
|
||||
}
|
||||
}
|
||||
|
||||
return selectedFiles
|
||||
}
|
||||
|
||||
// search filters the allFiles array on a search term. All files which match the
|
||||
// search term will be put into visibleFiles. The visibleFiles array will then
|
||||
// be rendered by render_visible_files
|
||||
let lastSearchTerm = ""
|
||||
export const search = (term) => {
|
||||
term = term.toLowerCase()
|
||||
lastSearchTerm = term
|
||||
|
||||
if (term === "") {
|
||||
for (let i in allFiles) {
|
||||
allFiles[i].filtered = false
|
||||
}
|
||||
sortBy("")
|
||||
render_visible_files()
|
||||
return
|
||||
}
|
||||
|
||||
let fileName = ""
|
||||
for (let i in allFiles) {
|
||||
fileName = allFiles[i].name.toLowerCase()
|
||||
|
||||
if (fileName.includes(term)) {
|
||||
// If a file name contains the search term we include it in the results
|
||||
allFiles[i].filtered = false
|
||||
} else {
|
||||
allFiles[i].filtered = true
|
||||
}
|
||||
}
|
||||
|
||||
sortBy("")
|
||||
render_visible_files()
|
||||
}
|
||||
|
||||
// searchSubmit opens the first file in the search results
|
||||
export const searchSubmit = () => {
|
||||
for (let i in allFiles) {
|
||||
if (allFiles[i].visible && !allFiles[i].filtered) {
|
||||
window.open(allFiles[i].href, "_blank")
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sorting internal state. By default we sort by dateCreated in descending
|
||||
// order (new to old)
|
||||
let currentSortField = "dateCreated"
|
||||
let currentSortAscending = false
|
||||
let tableColumns = [
|
||||
{ name: "Name", field: "name", width: "" },
|
||||
{ name: "Creation date", field: "dateCreated", width: "160px" },
|
||||
{ name: "Size", field: "size", width: "90px" },
|
||||
{ name: "Type", field: "type", width: "200px" },
|
||||
]
|
||||
const sortBy = (field) => {
|
||||
if (field === "") {
|
||||
// If no sort field is provided we use the last used sort field
|
||||
field = currentSortField
|
||||
} else {
|
||||
// If a sort field is provided we check in which direction we have to
|
||||
// sort
|
||||
if (currentSortField !== field) {
|
||||
// If this field is a different field than before we sort it in
|
||||
// ascending order
|
||||
currentSortAscending = true
|
||||
currentSortField = field
|
||||
} else if (currentSortField === field) {
|
||||
// If it is the same field as before we reverse the sort order
|
||||
currentSortAscending = !currentSortAscending
|
||||
}
|
||||
}
|
||||
|
||||
// Add the arrow to the sort label. First remove the arrow from all sort
|
||||
// labels
|
||||
let colIdx = 0
|
||||
|
||||
for (let i in tableColumns) {
|
||||
if (tableColumns[i].field == field) {
|
||||
colIdx = i
|
||||
}
|
||||
tableColumns[i].name = tableColumns[i].name.replace("▲ ", "").replace("▼ ", "")
|
||||
}
|
||||
|
||||
// Then prepend the arrow to the current sort label
|
||||
if (currentSortAscending) {
|
||||
tableColumns[colIdx].name = "▼ " + tableColumns[colIdx].name
|
||||
} else {
|
||||
tableColumns[colIdx].name = "▲ " + tableColumns[colIdx].name
|
||||
}
|
||||
|
||||
tableColumns = tableColumns
|
||||
|
||||
let fieldA, fieldB
|
||||
allFiles.sort((a, b) => {
|
||||
fieldA = a[currentSortField]
|
||||
fieldB = b[currentSortField]
|
||||
|
||||
if (typeof (fieldA) === "number") {
|
||||
if (currentSortAscending) {
|
||||
return fieldA - fieldB
|
||||
} else {
|
||||
return fieldB - fieldA
|
||||
}
|
||||
} else {
|
||||
if (currentSortAscending) {
|
||||
return fieldA.localeCompare(fieldB, undefined, {numeric: true})
|
||||
} else {
|
||||
return fieldB.localeCompare(fieldA, undefined, {numeric: true})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
render_visible_files()
|
||||
}
|
||||
|
||||
// Scroll event for rendering new file nodes when they become visible. For
|
||||
// performance reasons the files will only be rendered once every 100ms. If a
|
||||
// scroll event comes in and we're not done with the previous frame yet the
|
||||
// event will be ignored
|
||||
let render_timeout = false;
|
||||
const onScroll = (e) => {
|
||||
if (render_timeout) {
|
||||
return
|
||||
}
|
||||
|
||||
render_timeout = true
|
||||
setTimeout(() => {
|
||||
render_visible_files()
|
||||
render_timeout = false
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const render_visible_files = () => {
|
||||
const fileHeight = 40
|
||||
|
||||
let paddingTop = directoryArea.scrollTop - directoryArea.scrollTop % fileHeight
|
||||
let start = Math.floor(paddingTop / fileHeight) - 5
|
||||
if (start < 0) { start = 0 }
|
||||
|
||||
let end = Math.ceil((paddingTop + directoryArea.clientHeight) / fileHeight) + 5
|
||||
if (end > allFiles.length) { end = allFiles.length - 1 }
|
||||
|
||||
nodeContainer.style.paddingTop = (start * fileHeight) + "px"
|
||||
|
||||
// All files which have not been filtered out by the search function. We
|
||||
// pretend that files with filtered == true do not exist
|
||||
let totalFiles = 0
|
||||
let totalSize = 0
|
||||
let selectedFiles = 0
|
||||
let selectedSize = 0
|
||||
|
||||
for (let i in allFiles) {
|
||||
if (totalFiles >= start && totalFiles <= end && !allFiles[i].filtered) {
|
||||
allFiles[i].visible = true
|
||||
} else {
|
||||
allFiles[i].visible = false
|
||||
}
|
||||
if (!allFiles[i].filtered) {
|
||||
totalFiles++
|
||||
totalSize += allFiles[i].size
|
||||
|
||||
if (allFiles[i].selected) {
|
||||
selectedFiles++
|
||||
selectedSize += allFiles[i].size
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nodeContainer.style.height = (totalFiles * fileHeight) + "px"
|
||||
statusBar = totalFiles + " items ("+formatDataVolume(totalSize, 4)+")"
|
||||
|
||||
if (selectedFiles !== 0) {
|
||||
statusBar += ", "+selectedFiles+" selected ("+formatDataVolume(selectedSize, 4)+")"
|
||||
}
|
||||
}
|
||||
|
||||
let selectionMode = false
|
||||
export const setSelectionMode = (s) => {
|
||||
selectionMode = s
|
||||
|
||||
// When selection mode is disabled we automatically deselect all files
|
||||
if (!s) {
|
||||
for (let i in allFiles) {
|
||||
allFiles[i].selected = false
|
||||
}
|
||||
render_visible_files()
|
||||
}
|
||||
}
|
||||
|
||||
let shift_pressed = false
|
||||
const detect_shift = (e) => {
|
||||
if (e.key !== "Shift") {
|
||||
return
|
||||
}
|
||||
|
||||
shift_pressed = e.type === "keydown"
|
||||
}
|
||||
|
||||
export let multi_select = true
|
||||
let last_selected_node = -1
|
||||
const node_click = (index) => {
|
||||
if (selectionMode) {
|
||||
if (multi_select && shift_pressed && last_selected_node != -1) {
|
||||
let id_low = last_selected_node
|
||||
let id_high = last_selected_node
|
||||
if (last_selected_node < index) {
|
||||
id_high = index
|
||||
} else {
|
||||
id_low = index
|
||||
}
|
||||
|
||||
for (let i = id_low; i <= id_high && !allFiles[i].filtered; i++) {
|
||||
if (i != last_selected_node) {
|
||||
allFiles[i].selected = !allFiles[i].selected
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// If multi select is disabled we deselect all other files before
|
||||
// selecting this one
|
||||
if (!multi_select) {
|
||||
for (let i in allFiles) {
|
||||
allFiles[i].selected = false
|
||||
}
|
||||
}
|
||||
|
||||
allFiles[index].selected = !allFiles[index].selected
|
||||
}
|
||||
|
||||
last_selected_node = index
|
||||
render_visible_files()
|
||||
} else {
|
||||
window.open(allFiles[index].href, "_blank")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={detect_shift} on:keyup={detect_shift} />
|
||||
|
||||
<div id="directory_element">
|
||||
<div class="directory_sorters">
|
||||
{#each tableColumns as col}
|
||||
<button style="min-width: {col.width}" on:click={sortBy(col.field)} class="sorter_button">
|
||||
{col.name}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div bind:this={directoryArea} on:scroll={onScroll} id="directory_area" class="directory_area">
|
||||
<div bind:this={nodeContainer} id="node_container" class="directory_node_container">
|
||||
{#each allFiles as file, index}
|
||||
{#if file.visible && !file.filtered}
|
||||
<a class="node"
|
||||
href={file.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title="{file.name}"
|
||||
class:node_selected={file.selected}
|
||||
on:click|preventDefault={() => {node_click(index)}}
|
||||
>
|
||||
<div>
|
||||
<img src={file.icon} alt="thumbnail" />
|
||||
<span>{file.name}</span>
|
||||
</div>
|
||||
<div style="width: {tableColumns[1].width}">
|
||||
<span>{formatDate(new Date(file.dateCreated), true, true, false)}</span>
|
||||
</div>
|
||||
<div style="width: {tableColumns[2].width}">
|
||||
<span>{file.sizeLabel}</span>
|
||||
</div>
|
||||
<div style="width: {tableColumns[3].width}">
|
||||
<span>{file.type}</span>
|
||||
</div>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
{statusBar}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#directory_element {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.directory_sorters {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
background: var(--body_background);
|
||||
min-width: 850px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom: 1px solid var(--separator);
|
||||
}
|
||||
.sorter_button {
|
||||
display: inline-block;
|
||||
margin: 4px 10px;
|
||||
text-align: initial;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.sorter_button:hover {
|
||||
background: var(--input_hover_background);
|
||||
}
|
||||
|
||||
.directory_sorters > :first-child,
|
||||
.node > :first-child {
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.directory_sorters > :not(:first-child),
|
||||
.node > :not(:first-child) {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
#directory_area {
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
background: var(--body_background);
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
#node_container {
|
||||
display: block;
|
||||
min-width: 850px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
flex-shrink: 0;
|
||||
color: var(--background_text_color);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.node {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
position: static;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
|
||||
/* I use padding instead of margin here because it goves me more precise
|
||||
control over the size.
|
||||
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing */
|
||||
margin: 0;
|
||||
color: var(--body_text_color);
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.node:hover:not(.node_selected) {
|
||||
background: var(--input_hover_background);
|
||||
color: var(--input_text);
|
||||
text-decoration: none;
|
||||
}
|
||||
.node_selected {
|
||||
background: var(--highlight_background);
|
||||
color: var(--highlight_text_color);
|
||||
}
|
||||
.node > div {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: auto 10px;
|
||||
padding: 4px;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.node > div > span {
|
||||
margin: auto;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.node > div > img {
|
||||
max-height: 100%;
|
||||
margin-right: 6px;
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
393
svelte/src/user_home/filemanager/FileManager.svelte
Normal file
393
svelte/src/user_home/filemanager/FileManager.svelte
Normal file
@@ -0,0 +1,393 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { formatDataVolume } from "../../util/Formatting.svelte";
|
||||
import Modal from "../../util/Modal.svelte";
|
||||
import Spinner from "../../util/Spinner.svelte";
|
||||
import UploadWidget from "../../util/upload_widget/UploadWidget.svelte";
|
||||
import DirectoryElement from "./DirectoryElement.svelte"
|
||||
|
||||
let loading = true
|
||||
let contentType = "" // files or lists
|
||||
let inputSearch
|
||||
let directoryElement
|
||||
let downloadFrame
|
||||
let help_modal
|
||||
let help_modal_visible = false
|
||||
let upload_widget
|
||||
|
||||
let getUserFiles = () => {
|
||||
loading = true
|
||||
|
||||
fetch(window.api_endpoint + "/user/files").then(resp => {
|
||||
if (!resp.ok) { Promise.reject("yo") }
|
||||
return resp.json()
|
||||
}).then(resp => {
|
||||
directoryElement.reset()
|
||||
|
||||
for (let i in resp.files) {
|
||||
directoryElement.addFile(
|
||||
resp.files[i].id,
|
||||
window.api_endpoint + "/file/" + resp.files[i].id + "/thumbnail?width=32&height=32",
|
||||
resp.files[i].name,
|
||||
"/u/" + resp.files[i].id,
|
||||
resp.files[i].mime_type,
|
||||
resp.files[i].size,
|
||||
formatDataVolume(resp.files[i].size, 4),
|
||||
resp.files[i].date_upload,
|
||||
)
|
||||
}
|
||||
|
||||
directoryElement.renderFiles()
|
||||
}).catch((err) => {
|
||||
throw (err)
|
||||
}).finally(() => {
|
||||
loading = false
|
||||
})
|
||||
}
|
||||
|
||||
let getUserLists = () => {
|
||||
loading = true
|
||||
|
||||
fetch(window.api_endpoint + "/user/lists").then(resp => {
|
||||
if (!resp.ok) { Promise.reject("yo") }
|
||||
return resp.json()
|
||||
}).then(resp => {
|
||||
directoryElement.reset()
|
||||
|
||||
for (let i in resp.lists) {
|
||||
directoryElement.addFile(
|
||||
resp.lists[i].id,
|
||||
window.api_endpoint + "/list/" + resp.lists[i].id + "/thumbnail?width=32&height=32",
|
||||
resp.lists[i].title,
|
||||
"/l/" + resp.lists[i].id,
|
||||
"list",
|
||||
resp.lists[i].file_count,
|
||||
resp.lists[i].file_count + " files",
|
||||
resp.lists[i].date_created,
|
||||
)
|
||||
}
|
||||
|
||||
directoryElement.renderFiles()
|
||||
}).catch((err) => {
|
||||
throw (err)
|
||||
}).finally(() => {
|
||||
loading = false
|
||||
})
|
||||
}
|
||||
|
||||
const searchHandler = (e) => {
|
||||
if (e.keyCode === 27) { // Escape
|
||||
e.preventDefault()
|
||||
inputSearch.value = ""
|
||||
inputSearch.blur()
|
||||
} else if (e.keyCode === 13) { // Enter
|
||||
e.preventDefault()
|
||||
directoryElement.searchSubmit()
|
||||
return
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
directoryElement.search(inputSearch.value)
|
||||
})
|
||||
}
|
||||
|
||||
let initialized = false
|
||||
let hashChange = () => {
|
||||
if (!initialized) {
|
||||
return
|
||||
}
|
||||
if (window.location.hash === "#lists") {
|
||||
contentType = "lists"
|
||||
document.title = "My Albums"
|
||||
getUserLists()
|
||||
resetMenu()
|
||||
} else {
|
||||
contentType = "files"
|
||||
document.title = "My Files"
|
||||
getUserFiles()
|
||||
resetMenu()
|
||||
}
|
||||
}
|
||||
|
||||
let selecting = false
|
||||
const toggleSelecting = () => {
|
||||
selecting = !selecting
|
||||
directoryElement.setSelectionMode(selecting)
|
||||
}
|
||||
|
||||
const bulkDelete = async () => {
|
||||
let selected = directoryElement.getSelectedFiles()
|
||||
|
||||
if (selected.length === 0) {
|
||||
alert("You have not selected any files")
|
||||
return
|
||||
}
|
||||
|
||||
if (contentType === "lists") {
|
||||
if (!confirm(
|
||||
"You are about to delete "+selected.length+" lists. "+
|
||||
"This is not reversible!\n"+
|
||||
"Are you sure?"
|
||||
)){ return }
|
||||
} else {
|
||||
if (!confirm(
|
||||
"You are about to delete "+selected.length+" files. "+
|
||||
"This is not reversible!\n"+
|
||||
"Are you sure?"
|
||||
)){ return }
|
||||
}
|
||||
|
||||
loading = true
|
||||
|
||||
let endpoint = window.api_endpoint+"/file/"
|
||||
if (contentType === "lists") {
|
||||
endpoint = window.api_endpoint+"/list/"
|
||||
}
|
||||
|
||||
for (let i in selected) {
|
||||
try {
|
||||
const resp = await fetch(
|
||||
endpoint+encodeURIComponent(selected[i].id),
|
||||
{ method: "DELETE" }
|
||||
);
|
||||
if(resp.status >= 400) {
|
||||
throw new Error(resp.text())
|
||||
}
|
||||
} catch (err) {
|
||||
alert("Delete failed: "+err)
|
||||
}
|
||||
}
|
||||
|
||||
hashChange()
|
||||
}
|
||||
|
||||
function createList() {
|
||||
let selected = directoryElement.getSelectedFiles()
|
||||
|
||||
if (selected.length === 0) {
|
||||
alert("You have not selected any files")
|
||||
return
|
||||
}
|
||||
|
||||
let title = prompt(
|
||||
"You are creating a list containing " + selected.length + " files.\n"
|
||||
+ "What do you want to call it?", "My New Album"
|
||||
)
|
||||
if (title === null) {
|
||||
return
|
||||
}
|
||||
|
||||
let files = selected.reduce(
|
||||
(acc, curr) => {
|
||||
acc.push({"id": curr.id})
|
||||
return acc
|
||||
},
|
||||
[],
|
||||
)
|
||||
|
||||
fetch(
|
||||
window.api_endpoint+"/list",
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json; charset=UTF-8" },
|
||||
body: JSON.stringify({
|
||||
"title": title,
|
||||
"files": files
|
||||
})
|
||||
}
|
||||
).then(resp => {
|
||||
if (!resp.ok) {
|
||||
return Promise.reject("HTTP error: " + resp.status)
|
||||
}
|
||||
return resp.json()
|
||||
}).then(resp => {
|
||||
window.open('/l/' + resp.id, '_blank')
|
||||
}).catch(err => {
|
||||
alert("Failed to create list. Server says this:\n"+err)
|
||||
})
|
||||
}
|
||||
|
||||
function downloadFiles() {
|
||||
let selected = directoryElement.getSelectedFiles()
|
||||
|
||||
if (selected.length === 0) {
|
||||
alert("You have not selected any files")
|
||||
return
|
||||
}
|
||||
|
||||
// Create a list of file ID's separated by commas
|
||||
let ids = selected.reduce((acc, curr) => acc + curr.id + ",", "")
|
||||
|
||||
// Remove the last comma
|
||||
ids = ids.slice(0, -1)
|
||||
|
||||
downloadFrame.src = window.api_endpoint+"/file/"+ids+"?download"
|
||||
}
|
||||
|
||||
const keydown = (e) => {
|
||||
if (e.ctrlKey && e.key === "f" || !e.ctrlKey && e.keyCode === 191) {
|
||||
e.preventDefault()
|
||||
inputSearch.focus()
|
||||
}
|
||||
|
||||
if (e.ctrlKey || e.altKey || e.metaKey) {
|
||||
return // prevent custom shortcuts from interfering with system shortcuts
|
||||
}
|
||||
if (document.activeElement.type && document.activeElement.type === "text") {
|
||||
return // Prevent shortcuts from interfering with input fields
|
||||
}
|
||||
|
||||
|
||||
if (e.key === "i") {
|
||||
help_modal.toggle()
|
||||
} else if (e.key === "/") {
|
||||
inputSearch.focus()
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
// This will only be run if a custom shortcut was triggered
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
initialized = true
|
||||
hashChange()
|
||||
})
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={keydown} on:hashchange={hashChange} />
|
||||
|
||||
<div id="file_manager" class="file_manager page_margins">
|
||||
<div id="nav_bar" class="nav_bar">
|
||||
<button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
|
||||
<button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}>
|
||||
<i class="icon">select_all</i> Select
|
||||
</button>
|
||||
<input
|
||||
bind:this={inputSearch}
|
||||
on:keyup={searchHandler}
|
||||
id="input_search"
|
||||
class="input_search"
|
||||
type="text"
|
||||
placeholder="press / to search"
|
||||
/>
|
||||
{#if contentType === "files"}
|
||||
<button on:click={upload_widget.pick_files} id="btn_upload" title="Upload files">
|
||||
<i class="icon">cloud_upload</i>
|
||||
</button>
|
||||
{/if}
|
||||
<button on:click={hashChange} id="btn_reload" title="Refresh file list">
|
||||
<i class="icon">refresh</i>
|
||||
</button>
|
||||
<button on:click={() => help_modal.toggle()} class:button_highlight={help_modal_visible} title="Help">
|
||||
<i class="icon">info</i>
|
||||
</button>
|
||||
</div>
|
||||
{#if selecting}
|
||||
<div class="nav_bar">
|
||||
{#if contentType === "files"}
|
||||
<button on:click={createList}><i class="icon">list</i> Make album</button>
|
||||
<button on:click={downloadFiles}><i class="icon">download</i> Download</button>
|
||||
{/if}
|
||||
<button on:click={bulkDelete}><i class="icon">delete</i> Delete</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if loading}
|
||||
<div class="spinner">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
{/if}
|
||||
<DirectoryElement bind:this={directoryElement}></DirectoryElement>
|
||||
|
||||
<Modal
|
||||
bind:this={help_modal}
|
||||
title="File manager help"
|
||||
width="600px"
|
||||
on:is_visible={e => {help_modal_visible = e.detail}}
|
||||
>
|
||||
<div class="indent">
|
||||
<p>
|
||||
In the file manager you can see the files you have uploaded and
|
||||
the lists you have created.
|
||||
</p>
|
||||
<h3>Searching</h3>
|
||||
<p>
|
||||
By clicking the search bar or pressing the / button you can
|
||||
search through your files or lists. Only the entries matching
|
||||
your search term will be shown. Pressing Enter will open the
|
||||
first search result in a new tab. Pressing Escape will cancel
|
||||
the search and all files will be shown again.
|
||||
</p>
|
||||
<h3>Bulk actions</h3>
|
||||
<p>
|
||||
With the Select button you can click files to select them. Once
|
||||
you have made a selection you can use the buttons on the toolbar
|
||||
to either create a list containing the selected files or delete
|
||||
them.
|
||||
</p>
|
||||
<p>
|
||||
Holding Shift while selecting a file will select all the files
|
||||
between the file you last selected and the file you just
|
||||
clicked.
|
||||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- This frame will load the download URL when a download button is pressed -->
|
||||
<iframe bind:this={downloadFrame} title="File download frame" style="display: none; width: 1px; height: 1px;"></iframe>
|
||||
</div>
|
||||
|
||||
<UploadWidget bind:this={upload_widget} drop_upload on:uploads_finished={hashChange}/>
|
||||
|
||||
<style>
|
||||
:global(#page_body) {
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Override the menu button so it doesn't overlap the file manager when the menu
|
||||
is collapsed */
|
||||
:global(#button_toggle_navigation) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#file_manager {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.nav_bar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 2px;
|
||||
}
|
||||
.nav_bar > button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.input_search {
|
||||
flex: 1 1 auto;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: absolute;
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user