Skip to content

Commit

Permalink
clean up servers page
Browse files Browse the repository at this point in the history
  • Loading branch information
@hzrd149
hzrd149 committed Mar 16, 2024
1 parent 55dbba2 commit 3d24728
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 120 deletions.
4 changes: 2 additions & 2 deletions src/components/Sidebar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@
<DropdownItem on:click={() => (newDriveModal = true)}>
<ArchiveSolid class="inline-block h-6 w-6" /> Drive
</DropdownItem>
<DropdownDivider />
<!-- <DropdownDivider />
<DropdownItem><FileImportOutline class="inline-block h-6 w-6" /> Upload Files</DropdownItem>
<DropdownItem><FolderArrowRightOutline class="inline-block h-6 w-6" /> Upload Folder</DropdownItem>
<DropdownItem><FolderArrowRightOutline class="inline-block h-6 w-6" /> Upload Folder</DropdownItem> -->
</Dropdown>

{#if $activeUser}
Expand Down
157 changes: 81 additions & 76 deletions src/pages/Blobs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@
import { formatBytes } from "../helpers/number";
import { getBlobURL } from "../helpers/blob";
import { BlossomClient, type BlobDescriptor } from "blossom-client";
import { signEventTemplate } from "../services/ndk";
import { activeUser, signEventTemplate } from "../services/ndk";
import { servers } from "../services/servers";
import type Drive from "../blossom-drive-client/Drive";
import LoginPage from "../components/LoginPage.svelte";
onMount(() => {
refreshBlobs();
Expand Down Expand Up @@ -66,79 +67,83 @@
}
</script>

<div class="m-2 flex gap-2">
<Select placeholder="Server..." bind:value={selectedServer} class="max-w-60" size="sm">
<option value="">Any</option>
<optgroup label="Servers">
{#each $servers as server}
<option value={server}>{new URL(server).hostname}</option>
{#if $activeUser}
<div class="m-2 flex gap-2">
<Select placeholder="Server..." bind:value={selectedServer} class="max-w-60" size="sm">
<option value="">Any</option>
<optgroup label="Servers">
{#each $servers as server}
<option value={server}>{new URL(server).hostname}</option>
{/each}
</optgroup>
</Select>
<Select placeholder="Drive..." bind:value={selectedDrive} class="max-w-60" size="sm">
<option value="">Any</option>
<option value="--none--">None</option>
<optgroup label="Drives">
{#each Object.entries($drives) as [id, drive]}
<option value={id}>{drive.name}</option>
{/each}
</optgroup>
</Select>
<Select placeholder="Type..." bind:value={selectedType} class="max-w-60" size="sm">
<option value="">Any</option>
{#each types as type}
<option value={type}>{type}</option>
{/each}
</optgroup>
</Select>
<Select placeholder="Drive..." bind:value={selectedDrive} class="max-w-60" size="sm">
<option value="">Any</option>
<option value="--none--">None</option>
<optgroup label="Drives">
{#each Object.entries($drives) as [id, drive]}
<option value={id}>{drive.name}</option>
{/each}
</optgroup>
</Select>
<Select placeholder="Type..." bind:value={selectedType} class="max-w-60" size="sm">
<option value="">Any</option>
{#each types as type}
<option value={type}>{type}</option>
{/each}
</Select>
</div>
<div class="h-0 flex-1 overflow-auto">
<Table hoverable={true}>
<TableHead>
<TableHeadCell>ID</TableHeadCell>
<TableHeadCell>Type</TableHeadCell>
<TableHeadCell>Size</TableHeadCell>
<TableHeadCell>Created</TableHeadCell>
<TableHeadCell>Drives</TableHeadCell>
<TableHeadCell>Servers</TableHeadCell>
<TableHeadCell>
<span class="sr-only">Edit</span>
</TableHeadCell>
</TableHead>
<TableBody>
{#each sortedBlobs as blob}
<TableBodyRow>
<TableBodyCell>
<a href={getBlobURL(blob)} target="_blank" class="hover:underline">{blob.sha256}</a>
</TableBodyCell>
<TableBodyCell>{blob.type}</TableBodyCell>
<TableBodyCell>{formatBytes(blob.size)}</TableBodyCell>
<TableBodyCell>{dayjs.unix(blob.created).format("ll")}</TableBodyCell>
<TableBodyCell>
{#each getBlobDrives(blob) as drive, i (drive.identifier)}
{#if i !== 0}<span>, </span>{/if}
<a href="#/drive/{drive.address}" class="text-primary-200 hover:underline">{drive.name}</a>
{/each}
</TableBodyCell>
<TableBodyCell>
{#each getBlobServers(blob) as server, i}
{#if i !== 0}<span>, </span>{/if}
<a href={server} target="_blank" class="text-primary-200 hover:underline">{new URL(server).hostname}</a>
{/each}
</TableBodyCell>
<TableBodyCell>
<div class="flex gap-4">
<a
href="/#"
on:click={(e) => {
e.preventDefault();
deleteBlob(blob);
}}
class="font-medium text-red-600 hover:underline dark:text-red-500">Delete</a
>
</div>
</TableBodyCell>
</TableBodyRow>
{/each}
</TableBody>
</Table>
</div>
</Select>
</div>
<div class="h-0 flex-1 overflow-auto">
<Table hoverable={true}>
<TableHead>
<TableHeadCell>ID</TableHeadCell>
<TableHeadCell>Type</TableHeadCell>
<TableHeadCell>Size</TableHeadCell>
<TableHeadCell>Created</TableHeadCell>
<TableHeadCell>Drives</TableHeadCell>
<TableHeadCell>Servers</TableHeadCell>
<TableHeadCell>
<span class="sr-only">Edit</span>
</TableHeadCell>
</TableHead>
<TableBody>
{#each sortedBlobs as blob}
<TableBodyRow>
<TableBodyCell>
<a href={getBlobURL(blob)} target="_blank" class="hover:underline">{blob.sha256}</a>
</TableBodyCell>
<TableBodyCell>{blob.type}</TableBodyCell>
<TableBodyCell>{formatBytes(blob.size)}</TableBodyCell>
<TableBodyCell>{dayjs.unix(blob.created).format("ll")}</TableBodyCell>
<TableBodyCell>
{#each getBlobDrives(blob) as drive, i (drive.identifier)}
{#if i !== 0}<span>, </span>{/if}
<a href="#/drive/{drive.address}" class="text-primary-200 hover:underline">{drive.name}</a>
{/each}
</TableBodyCell>
<TableBodyCell>
{#each getBlobServers(blob) as server, i}
{#if i !== 0}<span>, </span>{/if}
<a href={server} target="_blank" class="text-primary-200 hover:underline">{new URL(server).hostname}</a>
{/each}
</TableBodyCell>
<TableBodyCell>
<div class="flex gap-4">
<a
href="/#"
on:click={(e) => {
e.preventDefault();
deleteBlob(blob);
}}
class="font-medium text-red-600 hover:underline dark:text-red-500">Delete</a
>
</div>
</TableBodyCell>
</TableBodyRow>
{/each}
</TableBody>
</Table>
</div>
{:else}
<LoginPage />
{/if}
15 changes: 15 additions & 0 deletions src/pages/Home.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@
<script lang="ts">
import { Alert, Button } from "flowbite-svelte";
import DriveCard from "../components/DriveCard.svelte";
import SimpleCard from "../components/SimpleCard.svelte";
import { drives } from "../services/drives";
import { TagOutline } from "flowbite-svelte-icons";
import { activeUser } from "../services/ndk";
import LoginPage from "../components/LoginPage.svelte";
import { servers } from "../services/servers";
</script>

{#if $activeUser}
<main class="flex flex-col gap-4 p-4">
{#if $servers.length === 0}
<Alert color="red">
<div class="flex items-center gap-3">
<span class="text-lg font-medium">Missing servers</span>
</div>
<p class="mb-4 mt-2 text-sm">
You need to set at least one <a href="#/servers" class="font-bold underline">server</a> in order to upload files
</p>
<div class="flex gap-2">
<Button size="xs" href="#/servers">Add Server</Button>
</div>
</Alert>
{/if}
<h2 class="text-xl font-bold">Drives</h2>
<div class="flex w-full flex-wrap gap-4">
{#each Object.values($drives) as drive}
Expand Down
124 changes: 82 additions & 42 deletions src/pages/Servers.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,16 @@
TableBodyRow,
TableHead,
TableHeadCell,
A,
Heading,
P,
Alert,
} from "flowbite-svelte";
import { serverEvent, servers } from "../services/servers";
import { cloneEvent } from "../helpers/event";
import { activeUser } from "../services/ndk";
import LoginPage from "../components/LoginPage.svelte";
import { InfoCircleOutline } from "flowbite-svelte-icons";
let server = "";
let confirmModal = false;
Expand All @@ -27,8 +34,6 @@
loading = true;
if (!server.startsWith("http")) throw new Error("Protocol must be http:// or https://");
const res = await fetch(new URL("/upload", server));
if (res.status === 404) throw new Error("Server missing upload endpoint");
const draft = cloneEvent($serverEvent, 10063);
draft.tags.push(["r", new URL(server).toString()]);
Expand Down Expand Up @@ -56,47 +61,82 @@
}
</script>

<Table>
<TableHead>
<TableHeadCell>Server URL</TableHeadCell>
<TableHeadCell>Action</TableHeadCell>
</TableHead>
<TableBody>
{#each $servers as server}
<TableBodyRow>
<TableBodyCell>{server}</TableBodyCell>
<TableBodyCell>
<a
href="#/"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
on:click={(e) => {
e.preventDefault();
removeServer(server);
}}>Remove</a
></TableBodyCell
{#if $activeUser}
<div class="flex w-full max-w-screen-lg flex-col gap-4 p-4">
<Heading tag="h2">Servers</Heading>

{#if $servers.length > 0}
<Table>
<TableHead>
<TableHeadCell>Server URL</TableHeadCell>
<TableHeadCell>Action</TableHeadCell>
</TableHead>
<TableBody>
{#each $servers as server}
<TableBodyRow>
<TableBodyCell>
<a href={server} target="_blank" class="hover:underline">{new URL(server).hostname}</a>
</TableBodyCell>
<TableBodyCell>
<a
href="#/"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
on:click={(e) => {
e.preventDefault();
removeServer(server);
}}>Remove</a
></TableBodyCell
>
</TableBodyRow>
{/each}
</TableBody>
</Table>
{:else}
<Alert color="yellow">
<span class="font-medium">Warning!</span>
You need at least one server to upload files. try adding
<a
href="https://cdn.satellite.earth"
class="font-bold hover:underline"
on:click={(e) => {
e.preventDefault();
server = "https://cdn.satellite.earth";
confirmModal = true;
}}
>
</TableBodyRow>
{/each}
</TableBody>
</Table>
cdn.satellite.earth
</a>
</Alert>
{/if}

<form class="flex gap-2" on:submit={handleSubmit}>
<Input placeholder="https://cdn.example.com" bind:value={server} required />
<Button class="shrink-0" disabled={loading} type="submit">Add Server</Button>
</form>

<form class="flex gap-2 px-2" on:submit={handleSubmit}>
<Input placeholder="https://cdn.example.com" bind:value={server} required />
<Button class="shrink-0" disabled={loading} type="submit">Add Server</Button>
</form>
<Heading tag="h4">What are blossom servers?</Heading>
<P
><a href="https://github.com/hzrd149/blossom/blob/master/Server.md" target="_blank" class="hover:underline"
>Blossom servers</a
> are servers that store your files and make them publicly available for anyone else on the internet</P
>
</div>

{#if server}
<Modal title="Add Server" bind:open={confirmModal} autoclose size="xl">
<iframe
class="w-full"
style="height: 70vh;"
src={new URL("/", server).toString()}
frameborder="0"
title="Server info"
/>
<svelte:fragment slot="footer">
<Button color="alternative" class="ml-auto">Cancel</Button>
<Button on:click={addServer}>Add Server</Button>
</svelte:fragment>
</Modal>
{#if server}
<Modal title="Add Server" bind:open={confirmModal} autoclose size="xl">
<iframe
class="w-full"
style="height: 70vh;"
src={new URL("/", server).toString()}
frameborder="0"
title="Server info"
/>
<svelte:fragment slot="footer">
<Button color="alternative" class="ml-auto">Cancel</Button>
<Button on:click={addServer}>Add Server</Button>
</svelte:fragment>
</Modal>
{/if}
{:else}
<LoginPage />
{/if}

0 comments on commit 3d24728

Please sign in to comment.