From 1a9f30f18a204cb9a0eaca84b29d0140f0d6dfad Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Tue, 22 Feb 2022 19:53:48 +0100
Subject: [PATCH] Filesystem fixes

---
 .../directory_upload/DirectoryUploader.svelte |   2 +-
 svelte/src/filesystem/Filesystem.svelte       |  11 +-
 .../filemanager/CreateDirectory.svelte        |  26 ++-
 .../filesystem/filemanager/FileManager.svelte | 162 ++++--------------
 .../filemanager/FileUploader.svelte           |  14 +-
 .../filesystem/filemanager/GalleryView.svelte | 103 +++++++++++
 .../filesystem/filemanager/ListView.svelte    | 130 ++++++++++++++
 7 files changed, 308 insertions(+), 140 deletions(-)
 create mode 100644 svelte/src/filesystem/filemanager/GalleryView.svelte
 create mode 100644 svelte/src/filesystem/filemanager/ListView.svelte

diff --git a/svelte/src/directory_upload/DirectoryUploader.svelte b/svelte/src/directory_upload/DirectoryUploader.svelte
index e5447e3..371ec1c 100644
--- a/svelte/src/directory_upload/DirectoryUploader.svelte
+++ b/svelte/src/directory_upload/DirectoryUploader.svelte
@@ -1,6 +1,5 @@
 <script>
 import { tick } from "svelte";
-
 import FileManager from "../filesystem/filemanager/FileManager.svelte";
 import { fs_create_bucket, fs_get_node } from "../filesystem/FilesystemAPI.svelte";
 
@@ -18,6 +17,7 @@ export const add_files = async files => {
 			let bucket = await fs_create_bucket("", "", write_password)
 			bucket_id = bucket.id
 			bucket_state = await fs_get_node(bucket_id, "")
+			bucket_state.write_password = write_password
 		} catch (err) {
 			alert("Failed to create bucket! "+err)
 		}
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 47f4133..927eba2 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -43,6 +43,11 @@ let state = {
 	base: window.initial_node.base,
 	children: window.initial_node.children,
 
+	// Passwords for accessing this bucket. Passwords are not always required
+	// but sometimes they are
+	read_password: "",
+	write_password: "",
+
 	// These are used to navigate forward and backward within a directory (using
 	// the previous and next buttons on the toolbar). The cached siblings will
 	// be used so that we don't need to make an extra request to the parent
@@ -86,9 +91,6 @@ const navigate = (path, pushHist) => {
 			)
 		}
 
-		// Sort directory children
-		sort_children(resp.children)
-
 		open_node(resp)
 	}).catch(err => {
 		console.error(err)
@@ -108,6 +110,9 @@ const open_node = (node) => {
 		state.siblings = state.children
 	}
 
+	// Sort directory children
+	sort_children(node.children)
+
 	// Update shared state
 	state.bucket = node.bucket
 	state.parents = node.parents
diff --git a/svelte/src/filesystem/filemanager/CreateDirectory.svelte b/svelte/src/filesystem/filemanager/CreateDirectory.svelte
index 7f9b6f1..286ca0a 100644
--- a/svelte/src/filesystem/filemanager/CreateDirectory.svelte
+++ b/svelte/src/filesystem/filemanager/CreateDirectory.svelte
@@ -26,8 +26,26 @@ let create_dir = () => {
 onMount(() => { name_input.focus() })
 </script>
 
-<form class="node" on:submit|preventDefault={create_dir}>
-	<td><img src="/res/img/mime/folder.png" class="node_icon" alt="icon"/></td>
-	<td><input type="text" style="width: 100%;" bind:this={name_input} bind:value={create_dir_name} /></td>
-	<td><input type="submit" value="create"/></td>
+<form class="create_dir highlight_dark" on:submit|preventDefault={create_dir}>
+	<img src="/res/img/mime/folder.png" class="icon" alt="icon"/>
+	<input class="dirname" type="text" style="width: 100%;" bind:this={name_input} bind:value={create_dir_name} />
+	<input class="submit" type="submit" value="create"/>
 </form>
+
+<style>
+.create_dir {
+	display: flex;
+	flex-direction: row;
+}
+.create_dir > img {
+	height: 32px;
+	width: 32px;
+	flex: 0 0 auto;
+}
+.dirname {
+	flex: 1 1 auto;
+}
+.submit {
+	flex: 0 0 auto;
+}
+</style>
diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index 993a7c2..d75b744 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -1,12 +1,14 @@
 <script>
-import { formatDataVolume } from '../../util/Formatting.svelte'
 import { fs_delete_node } from './../FilesystemAPI.svelte'
 import { createEventDispatcher } from 'svelte'
 import CreateDirectory from './CreateDirectory.svelte'
 import FileUploader from './FileUploader.svelte'
+import ListView from './ListView.svelte'
+import GalleryView from './GalleryView.svelte'
 let dispatch = createEventDispatcher()
 
 export let state
+export let directory_view = "gallery"
 let uploader
 let mode = "viewing"
 let creating_dir = false
@@ -15,7 +17,9 @@ export const upload = files => {
 	return uploader.upload(files)
 }
 
-const node_click = (index) => {
+const node_click = e => {
+	let index = e.detail
+
 	creating_dir = false
 
 	// We prefix our custom state properties with fm_ to not interfere with
@@ -36,38 +40,6 @@ const navigate_up = () => {
 }
 const reload = () => { dispatch("navigate", state.base.path) }
 
-const node_icon = node => {
-	if (node.type === "dir") {
-		return "/res/img/mime/folder.png"
-	}
-
-	switch (node.file_type) {
-		case "image/gif":
-			return "/res/img/mime/image-gif.png"
-		case "image/png", "image/apng":
-			return "/res/img/mime/image-png.png"
-		case "image/jpeg":
-			return "/res/img/mime/image-jpeg.png"
-		case "application/pdf":
-			return "/res/img/mime/pdf.png"
-		case "application/ogg":
-			return "/res/img/mime/audio.png"
-	}
-
-	if (node.file_type.startsWith("audio/")) {
-		return "/res/img/mime/audio.png"
-	} else if (node.file_type.startsWith("video/")) {
-		return "/res/img/mime/video.png"
-	} else if (node.file_type.startsWith("text/")) {
-		return "/res/img/mime/text.png"
-	} else if (node.file_type.startsWith("image/")) {
-		return "/res/img/mime/image-png.png"
-	} else if (node.file_type.startsWith("application/")) {
-		return "/res/img/mime/archive.png"
-	}
-	return "/res/img/mime/empty.png"
-}
-
 const delete_selected = () => {
 	if (mode !== "selecting") {
 		return
@@ -126,10 +98,22 @@ const toggle_select = () => {
 		<div class="toolbar">
 			<button on:click={navigate_up} disabled={state.parents.length === 0}><i class="icon">arrow_back</i></button>
 			<button on:click={reload}><i class="icon">refresh</i></button>
+			{#if directory_view === "list"}
+				<button on:click={() => {directory_view = "gallery"}} alt="Switch to gallery view">
+					<i class="icon">collections</i>
+				</button>
+			{:else if directory_view === "gallery"}
+				<button on:click={() => {directory_view = "list"}} alt="Switch to list view">
+					<i class="icon">list</i>
+				</button>
+			{/if}
+
 			<div class="toolbar_spacer"></div>
 			{#if state.bucket.permissions.update}
 				<button on:click={uploader.picker}><i class="icon">cloud_upload</i></button>
-				<button on:click={() => {creating_dir = true}}><i class="icon">create_new_folder</i></button>
+				<button on:click={() => {creating_dir = !creating_dir}} class:button_highlight={creating_dir}>
+					<i class="icon">create_new_folder</i>
+				</button>
 
 				<button
 					on:click={toggle_select}
@@ -159,41 +143,25 @@ const toggle_select = () => {
 			</div>
 			<br/>
 		{/if}
+		{#if creating_dir}
+			<CreateDirectory state={state} on:done={() => {reload(); creating_dir = false;}} on:loading></CreateDirectory>
+		{/if}
 
-		<FileUploader bind:this={uploader} bucket_id={state.bucket.id} target_dir={state.base.path} on:reload={reload}></FileUploader>
+		<FileUploader
+			bind:this={uploader}
+			bucket_id={state.bucket.id}
+			target_dir={state.base.path}
+			on:reload={reload}
+			write_password={state.write_password}
+		></FileUploader>
 
-		<div class="directory">
-			<tr>
-				<td></td>
-				<td>name</td>
-				<td>size</td>
-			</tr>
-
-			{#if creating_dir}
-				<CreateDirectory state={state} on:done={() => {reload(); creating_dir = false;}} on:loading></CreateDirectory>
-			{/if}
-
-			{#each state.children as child, index (child.path)}
-				<a
-					href={state.path_root+child.path}
-					on:click|preventDefault={() => {node_click(index)}}
-					class="node"
-					class:node_selected={child.fm_selected}>
-					<td>
-						<img src={node_icon(child)} class="node_icon" alt="icon"/>
-					</td>
-					<td class="node_name">
-						{child.name}
-					</td>
-					<td class="node_size">
-						{#if child.type === "file"}
-							{formatDataVolume(child.file_size, 3)}
-						{/if}
-					</td>
-				</a>
-			{/each}
-		</div>
 	</div>
+
+	{#if directory_view === "list"}
+		<ListView state={state} on:node_click={node_click}></ListView>
+	{:else if directory_view === "gallery"}
+		<GalleryView state={state} on:node_click={node_click}></GalleryView>
+	{/if}
 </div>
 
 <style>
@@ -206,10 +174,10 @@ const toggle_select = () => {
 }
 .width_container {
 	position: relative;
-	display: inline-block;
+	display: block;
 	max-width: 95%;
 	width: 1000px;
-	margin: 0;
+	margin: auto;
 	padding: 0;
 }
 .toolbar {
@@ -229,60 +197,4 @@ const toggle_select = () => {
 		flex-direction: column;
 	}
 }
-
-.directory {
-	display: table;
-	position: relative;
-	overflow-x: auto;
-	overflow-y: hidden;
-	width: 100%;
-	margin: 16px 0 16px 0;
-	text-align: left;
-	background-color: var(--layer_1_color);
-	box-shadow: 1px 1px 5px var(--shadow_color);
-	border-collapse: collapse;
-}
-.directory > * { display: table-row; }
-.directory > * > * { display: table-cell; }
-.directory :global(.node) {
-	display: table-row;
-	text-decoration: none;
-	color: var(--text-color);
-	padding: 6px;
-}
-.directory :global(.node:not(:last-child)) {
-	border-bottom: 1px solid var(--layer_2_color);
-}
-.directory :global(.node:hover:not(.node_selected)) {
-	background-color: var(--input_color_dark);
-	color: var(--input_text_color);
-	text-decoration: none;
-}
-.directory :global(.node.node_selected) {
-	background-color: var(--highlight_color) !important;
-	color: var(--highlight_text_color);
-}
-.directory :global(.node.node_delete) {
-	background-color: var(--danger_color) !important;
-	color: var(--highlight_text_color);
-}
-.directory :global(td) {
-	padding: 4px;
-	vertical-align: middle;
-}
-.directory :global(.node_icon) {
-	height: 32px;
-	width: 32px;
-	vertical-align: middle;
-}
-.directory :global(.node_name) {
-	width: 100%;
-	overflow: hidden;
-	line-height: 1.2em;
-	word-break: break-all;
-}
-.directory :global(.node_size) {
-	min-width: 50px;
-	white-space: nowrap;
-}
 </style>
diff --git a/svelte/src/filesystem/filemanager/FileUploader.svelte b/svelte/src/filesystem/filemanager/FileUploader.svelte
index d37c751..40cd70c 100644
--- a/svelte/src/filesystem/filemanager/FileUploader.svelte
+++ b/svelte/src/filesystem/filemanager/FileUploader.svelte
@@ -4,6 +4,7 @@ let dispatch = createEventDispatcher();
 
 export let bucket_id;
 export let target_dir;
+export let write_password = "";
 
 let upload_jobs = [];
 let upload_threads = 0;
@@ -70,14 +71,13 @@ const upload_file = () => {
 	form.append("type", "file");
 	form.append("file", job.file);
 
+	let url = window.api_endpoint+"/filesystem/"+bucket_id+encodeURIComponent(job.target_dir + "/" + job.file.name)
+	if (write_password) {
+		url += "?write_password="+write_password
+	}
+
 	let xhr = new XMLHttpRequest();
-	xhr.open(
-		"POST",
-		"/api/filesystem/" +
-			bucket_id +
-			encodeURIComponent(job.target_dir + "/" + job.file.name),
-		true
-	);
+	xhr.open("POST", url, true);
 	xhr.timeout = 21600000; // 6 hours, to account for slow connections
 
 	// Report progress updates back to the caller
diff --git a/svelte/src/filesystem/filemanager/GalleryView.svelte b/svelte/src/filesystem/filemanager/GalleryView.svelte
new file mode 100644
index 0000000..c836df9
--- /dev/null
+++ b/svelte/src/filesystem/filemanager/GalleryView.svelte
@@ -0,0 +1,103 @@
+<script>
+import { createEventDispatcher } from "svelte"
+let dispatch = createEventDispatcher()
+
+export let state
+
+
+const node_icon = node => {
+	if (node.type === "dir") {
+		return "/res/img/mime/folder.png"
+	}
+
+	switch (node.file_type) {
+		case "image/gif":
+			return "/res/img/mime/image-gif.png"
+		case "image/png", "image/apng":
+			return "/res/img/mime/image-png.png"
+		case "image/jpeg":
+			return "/res/img/mime/image-jpeg.png"
+		case "application/pdf":
+			return "/res/img/mime/pdf.png"
+		case "application/ogg":
+			return "/res/img/mime/audio.png"
+	}
+
+	if (node.file_type.startsWith("audio/")) {
+		return "/res/img/mime/audio.png"
+	} else if (node.file_type.startsWith("video/")) {
+		return "/res/img/mime/video.png"
+	} else if (node.file_type.startsWith("text/")) {
+		return "/res/img/mime/text.png"
+	} else if (node.file_type.startsWith("image/")) {
+		return "/res/img/mime/image-png.png"
+	} else if (node.file_type.startsWith("application/")) {
+		return "/res/img/mime/archive.png"
+	}
+	return "/res/img/mime/empty.png"
+}
+
+
+</script>
+
+<div class="gallery">
+	{#each state.children as child, index (child.path)}
+		<a class="file"
+			href={state.path_root+child.path}
+			on:click|preventDefault={() => {dispatch("node_click", index)}}
+			class:selected={child.fm_selected}
+			title={child.name}
+		>
+			<div
+				class="icon_container"
+				style="background-image: url('{node_icon(child)}?width=256&height=256');">
+			</div>
+			{child.name}
+		</a>
+	{/each}
+</div>
+
+<style>
+.gallery{
+	padding: 16px;
+	overflow: hidden;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+.file{
+	position: relative;
+	width: 180px;
+	max-width: 45%;
+	height: 180px;
+	margin: 8px;
+	padding: 0;
+	overflow: hidden;
+	border-radius: 8px;
+	box-shadow: 1px 1px 6px 0 var(--shadow_color);
+	background-color: var(--layer_3_color);
+	text-align: center;
+	line-height: 1.2em;
+	display: inline-block;
+	text-overflow: ellipsis;
+	text-decoration: none;
+	vertical-align: top;
+	color: var(--text_color);
+}
+.file:hover {
+	box-shadow: 0 0 2px 2px var(--highlight_color);
+	text-decoration: none;
+}
+.selected {
+	background-color: var(--highlight_color_dark);
+}
+.icon_container {
+	width: 100%;
+	height: 116px;
+	background-position: center;
+	background-size: contain;
+	background-repeat: no-repeat;
+	font-size: 22px;
+	text-align: left;
+}
+</style>
diff --git a/svelte/src/filesystem/filemanager/ListView.svelte b/svelte/src/filesystem/filemanager/ListView.svelte
new file mode 100644
index 0000000..b8d40da
--- /dev/null
+++ b/svelte/src/filesystem/filemanager/ListView.svelte
@@ -0,0 +1,130 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import { formatDataVolume } from "../../util/Formatting.svelte";
+
+let dispatch = createEventDispatcher()
+
+export let state
+
+const node_icon = node => {
+	if (node.type === "dir") {
+		return "/res/img/mime/folder.png"
+	}
+
+	switch (node.file_type) {
+		case "image/gif":
+			return "/res/img/mime/image-gif.png"
+		case "image/png", "image/apng":
+			return "/res/img/mime/image-png.png"
+		case "image/jpeg":
+			return "/res/img/mime/image-jpeg.png"
+		case "application/pdf":
+			return "/res/img/mime/pdf.png"
+		case "application/ogg":
+			return "/res/img/mime/audio.png"
+	}
+
+	if (node.file_type.startsWith("audio/")) {
+		return "/res/img/mime/audio.png"
+	} else if (node.file_type.startsWith("video/")) {
+		return "/res/img/mime/video.png"
+	} else if (node.file_type.startsWith("text/")) {
+		return "/res/img/mime/text.png"
+	} else if (node.file_type.startsWith("image/")) {
+		return "/res/img/mime/image-png.png"
+	} else if (node.file_type.startsWith("application/")) {
+		return "/res/img/mime/archive.png"
+	}
+	return "/res/img/mime/empty.png"
+}
+
+</script>
+
+
+<div class="directory">
+	<tr>
+		<td></td>
+		<td>name</td>
+		<td>size</td>
+	</tr>
+	{#each state.children as child, index (child.path)}
+		<a
+			href={state.path_root+child.path}
+			on:click|preventDefault={() => {dispatch("node_click", index)}}
+			class="node"
+			class:node_selected={child.fm_selected}>
+			<td>
+				<img src={node_icon(child)} class="node_icon" alt="icon"/>
+			</td>
+			<td class="node_name">
+				{child.name}
+			</td>
+			<td class="node_size">
+				{#if child.type === "file"}
+					{formatDataVolume(child.file_size, 3)}
+				{/if}
+			</td>
+		</a>
+	{/each}
+</div>
+
+<style>
+
+.directory {
+	display: table;
+	position: relative;
+	overflow: hidden;
+	margin: 8px auto 16px auto;
+	text-align: left;
+	background-color: var(--layer_2_color);
+	box-shadow: 1px 1px 6px var(--shadow_color);
+	border-collapse: collapse;
+	border-radius: 8px;
+
+	max-width: 95%;
+	width: 1000px;
+}
+.directory > * {
+	display: table-row;
+}
+.directory > * > * {
+	display: table-cell;
+}
+.node {
+	display: table-row;
+	text-decoration: none;
+	color: var(--text-color);
+	padding: 6px;
+}
+.node:not(:last-child) {
+	border-bottom: 1px solid var(--layer_2_color_border);
+}
+.node:hover:not(.node_selected) {
+	background-color: var(--input_color_dark);
+	color: var(--input_text_color);
+	text-decoration: none;
+}
+.node.node_selected {
+	background-color: var(--highlight_color) !important;
+	color: var(--highlight_text_color);
+}
+td {
+	padding: 4px;
+	vertical-align: middle;
+}
+.node_icon {
+	height: 32px;
+	width: 32px;
+	vertical-align: middle;
+}
+.node_name {
+	width: 100%;
+	overflow: hidden;
+	line-height: 1.2em;
+	word-break: break-all;
+}
+.node_size {
+	min-width: 50px;
+	white-space: nowrap;
+}
+</style>