Use plain text viewer for plain text files

Fixes #29

svelte/src/filesystem/FilesystemAPI.svelte

@@ -1,5 +1,19 @@
 <script context="module">
 
+export const fs_create_bucket = async (name) => {
+	const form = new FormData()
+	form.append("name", name)
+
+	const resp = await fetch(
+		window.api_endpoint+"/filesystem",
+		{ method: "POST", body: form }
+	);
+	if(resp.status >= 400) {
+		throw new Error(resp.text());
+	}
+	return resp.json()
+}
+
 export const fs_get_buckets = async () => {
 	const resp = await fetch(window.api_endpoint+"/filesystem");
 	if(resp.status >= 400) {
@@ -8,6 +22,18 @@ export const fs_get_buckets = async () => {
 	return resp.json();
 }
 
+export const fs_delete_bucket = async (id, recursive) => {
+	let uri = window.api_endpoint+"/filesystem/"+encodeURIComponent(id)
+	if (recursive) {
+		uri += "?recursive"
+	}
+
+	const resp = await fetch(uri, { method: "DELETE" });
+	if(resp.status >= 400) {
+		throw new Error(resp.text());
+	}
+}
+
 export const fs_create_directory = async (bucket, path, dir_name) => {
 	if (!path.startsWith("/")) {
 		path = "/" + path
@@ -16,12 +42,12 @@ export const fs_create_directory = async (bucket, path, dir_name) => {
 	const form = new FormData()
 	form.append("type", "dir")
 
-	const resp=await fetch(
+	const resp = await fetch(
 		window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(path+"/"+dir_name),
 		{ method: "POST", body: form }
 	);
 	if(resp.status >= 400) {
-		throw new Error(resp.text());
+		throw new Error(resp.text())
 	}
 }
 
@@ -34,9 +60,9 @@ export const fs_get_node = async (bucket, path) => {
 		window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(path)+"?stat"
 	);
 	if(resp.status >= 400) {
-		throw new Error(resp.text());
+		throw new Error(resp.text())
 	}
-	return resp.json();
+	return resp.json()
 }
 
 export const fs_get_file_url = (bucket, path) => {
@@ -56,9 +82,9 @@ export const fs_rename_node = async (bucket, old_path, new_path) => {
 	const resp=await fetch(
 		window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(old_path),
 		{ method: "PUT", body: form }
-	);
+	)
 	if(resp.status >= 400) {
-		throw new Error(resp.text());
+		throw new Error(resp.text())
 	}
 }
 
@@ -72,7 +98,7 @@ export const fs_delete_node = async (bucket, path) => {
 		{ method: "DELETE" }
 	);
 	if(resp.status >= 400) {
-		throw new Error(resp.text());
+		throw new Error(resp.text())
 	}
 }
 

svelte/src/user_buckets/Bucket.svelte

@@ -1,4 +1,5 @@
 <script>
+import { fs_delete_bucket } from "../filesystem/FilesystemAPI.svelte";
 
 export let bucket
 let details_hidden = true
@@ -6,6 +7,25 @@ const expand_bucket = () => {
 	details_hidden = !details_hidden
 }
 
+const save_bucket = () => {
+	alert("save")
+}
+const delete_bucket = async () => {
+	if (!confirm(
+		"Are you sure you want to delete this bucket? All the files within "+
+		"the bucket will be irrevocably deleted. There is no way to recover "+
+		"from this! Press OK to proceed"
+	)) {
+		return
+	}
+
+	try {
+		await fs_delete_bucket(bucket.id, true)
+	} catch (err) {
+		alert("Failed to delete bucket! "+err)
+	}
+}
+
 </script>
 
 <div class="bucket">
@@ -23,7 +43,7 @@ const expand_bucket = () => {
 		</button>
 	</div>
 	<div class="bucket_details" class:hidden={details_hidden}>
-		<form>
+		<form on:submit|preventDefault={save_bucket}>
 			<table class="form">
 				<tr class="form">
 					<td>Name</td>
@@ -31,10 +51,10 @@ const expand_bucket = () => {
 				</tr>
 				<tr class="form">
 					<td colspan="2">
-						<button class="button_red">
+						<button class="button_red" on:click|preventDefault={delete_bucket}>
 							<i class="icon">delete</i> Delete
 						</button>
-						<button class="button_highlight" style="float: right;">
+						<button class="button_highlight" type="submit" style="float: right;">
 							<i class="icon">save</i> Save
 						</button>
 					</td>
@@ -50,6 +70,7 @@ const expand_bucket = () => {
 	background-color: var(--layer_3_color);
 	transition: box-shadow 0.5s;
 	box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);
+	margin: 1em 0;
 }
 .bucket_header {
 	display: flex;

svelte/src/user_buckets/NewBucket.svelte

@@ -0,0 +1,42 @@
+<script>
+import { fs_create_bucket } from "../filesystem/FilesystemAPI.svelte";
+
+let name
+
+const submit = async () => {
+	if (!name.value) {
+		alert("Please enter a name!")
+		return
+	}
+
+	try {
+		let bucket = await fs_create_bucket(name.value)
+		console.log(bucket)
+	} catch (err) {
+		alert("Failed to create bucket! "+err)
+	}
+}
+
+</script>
+
+<div class="highlight_light">
+	<form on:submit|preventDefault={submit}>
+		<table class="form">
+			<tr>
+				<td>
+					Name
+				</td>
+				<td>
+					<input type="text" bind:this={name}/>
+				</td>
+			</tr>
+			<tr>
+				<td colspan="2">
+					<button class="button_highlight" type="submit" style="float: right;">
+						<i class="icon">save</i> Save
+					</button>
+				</td>
+			</tr>
+		</table>
+	</form>
+</div>

svelte/src/user_buckets/UserBuckets.svelte

@@ -3,10 +3,14 @@ import { onMount } from "svelte";
 import Bucket from "./Bucket.svelte";
 import Spinner from "../util/Spinner.svelte";
 import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";
+import NewBucket from "./NewBucket.svelte";
 
 let loading = true;
 let buckets = [];
 
+let new_bucket;
+let creating_bucket = false;
+
 const get_buckets = async () => {
 	try {
 		let resp = await fs_get_buckets();
@@ -29,10 +33,18 @@ onMount(get_buckets);
 	{/if}
 
 	<div class="limit_width">
-		<button style="float: right;">
-			<i class="icon">create_new_folder</i> New bucket
-		</button>
-		<br/>
+		<div class="toolbar" style="text-align: right;">
+			<button
+				class:button_highlight={creating_bucket}
+				on:click={() => {creating_bucket = !creating_bucket}}
+			>
+				<i class="icon">create_new_folder</i> New bucket
+			</button>
+		</div>
+		{#if creating_bucket}
+			<NewBucket bind:this={new_bucket}></NewBucket>
+		{/if}
+
 		<h2>Persistent buckets</h2>
 		<p>
 			These buckets don't expire, but have limited storage space and
@@ -47,6 +59,7 @@ onMount(get_buckets);
 
 		</p>
 	</div>
+
 </div>
 
 <style>