From 08a0a6563875131963f11285449956cbbb230e38 Mon Sep 17 00:00:00 2001 From: avivash Date: Wed, 27 Sep 2023 11:14:06 -0700 Subject: [PATCH] Feat: add simple products landing page and simple table to workflow metrics --- src/components/home/Authed.svelte | 55 ++--- src/components/nav/SidebarNav.svelte | 2 +- src/lib/auth/account.ts | 4 +- src/lib/projects.ts | 16 ++ src/routes/link-device/+page.svelte | 3 +- src/routes/projects/+page.svelte | 0 src/routes/projects/[id]/+page.svelte | 45 ++++ src/routes/projects/lib/project-mocks.ts | 47 ++++ .../tasks/{[slug] => [id]}/+page.svelte | 2 +- src/routes/teams/+page.svelte | 0 .../workflows/{[slug] => [id]}/+page.svelte | 13 +- src/routes/workflows/components/Logs.svelte | 211 ++++++++++++++++++ src/stores.ts | 7 + 13 files changed, 367 insertions(+), 38 deletions(-) create mode 100644 src/lib/projects.ts create mode 100644 src/routes/projects/+page.svelte create mode 100644 src/routes/projects/[id]/+page.svelte create mode 100644 src/routes/projects/lib/project-mocks.ts rename src/routes/tasks/{[slug] => [id]}/+page.svelte (99%) create mode 100644 src/routes/teams/+page.svelte rename src/routes/workflows/{[slug] => [id]}/+page.svelte (94%) create mode 100644 src/routes/workflows/components/Logs.svelte diff --git a/src/components/home/Authed.svelte b/src/components/home/Authed.svelte index 40410b6..df62088 100644 --- a/src/components/home/Authed.svelte +++ b/src/components/home/Authed.svelte @@ -1,33 +1,34 @@ -
-

Welcome, {$sessionStore.username.trimmed}!

+

Projects

-
-

Photo Gallery Demo

-

- The ODD SDK makes it easy to implement private, encrypted, user-owned - storage in your app. See it in action with our photo gallery demo. -

- Try the Photo Gallery Demo -
+
+ {#each $projectsStore?.projects as project} +
+ +
+

{project?.name}

+

{project?.uri}

-
-

Device Connection Demo

-

- With the ODD SDK, a user’s account lives only on their connected devices — - entirely under their control. It’s easy for them to connect as many - devices as they’d like. For recoverability, we recommend they always - connect at least two. -

- -
+ +
+
+

Last updated {project?.lastModifiedTime} ago

+
+ +
+ {/each}
diff --git a/src/components/nav/SidebarNav.svelte b/src/components/nav/SidebarNav.svelte index c1ead7a..ba56cb8 100644 --- a/src/components/nav/SidebarNav.svelte +++ b/src/components/nav/SidebarNav.svelte @@ -12,7 +12,7 @@ const navItemsUpper = [ { - label: 'Home', + label: 'Projects', href: '/', icon: Home }, diff --git a/src/lib/auth/account.ts b/src/lib/auth/account.ts index bda561e..b902894 100644 --- a/src/lib/auth/account.ts +++ b/src/lib/auth/account.ts @@ -131,7 +131,7 @@ export async function waitForDataRoot(username: string): Promise { if (!reference) throw new Error('Program must be initialized to check for data root') let dataRoot = await reference.dataRoot.lookup(username) - + console.log('dataRoot', dataRoot.toString()) if (dataRoot.toString() !== EMPTY_CID) return return new Promise((resolve) => { @@ -140,7 +140,7 @@ export async function waitForDataRoot(username: string): Promise { const dataRootInterval = setInterval(async () => { dataRoot = await reference.dataRoot.lookup(username) - + console.log('dataRoot', dataRoot.toString()) if (dataRoot.toString() === EMPTY_CID && attempt < maxRetries) { attempt++ return diff --git a/src/lib/projects.ts b/src/lib/projects.ts new file mode 100644 index 0000000..dbc031f --- /dev/null +++ b/src/lib/projects.ts @@ -0,0 +1,16 @@ + + +export type ProjectsStore = { + loading: boolean + projects: Project[] +} + +export type Project = { + id: string + name: string + slug: string + description: string + teams: string[] + uri: string + lastModifiedTime: string +} diff --git a/src/routes/link-device/+page.svelte b/src/routes/link-device/+page.svelte index b29c64e..ca12e70 100644 --- a/src/routes/link-device/+page.svelte +++ b/src/routes/link-device/+page.svelte @@ -6,12 +6,11 @@ import { addNotification } from '$lib/notifications' import { createAccountLinkingConsumer } from '$lib/auth/linking' import { loadAccount } from '$lib/auth/account' - import { sessionStore } from '../../stores' + import { sessionStore } from '$src/stores' import { waitForDataRoot } from '$lib/auth/account' import type { LinkDeviceView } from '$lib/views' import FilesystemActivity from '$components/common/FilesystemActivity.svelte' import LinkDevice from '$components/auth/link-device/LinkDevice.svelte' - import { extractSearchParam } from '$lib/utils' let view: LinkDeviceView = 'link-device' diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte new file mode 100644 index 0000000..06cec31 --- /dev/null +++ b/src/routes/projects/[id]/+page.svelte @@ -0,0 +1,45 @@ + + +
+ {#if project} +

{project?.name}

+
+
+
+ {project?.description} +
+
+ +
+
+

URI

+

+ + {project?.uri} + +

+
+
+

Last modified

+

+ {project?.lastModifiedTime} ago +

+
+
+

Teams

+

+ {project?.teams} +

+
+
+
+ {/if} +
diff --git a/src/routes/projects/lib/project-mocks.ts b/src/routes/projects/lib/project-mocks.ts new file mode 100644 index 0000000..ca6eb8a --- /dev/null +++ b/src/routes/projects/lib/project-mocks.ts @@ -0,0 +1,47 @@ +export default [ + { + id: '4cfbe3n5-7935-4bb6-b64b-67cb6787018f', + name: 'ODD App Template', + slug: 'odd-app-template', + description: 'This is a great project', + teams: ['e412ac32-c1d4-46d4-aef3-3e38a9dd8e32'], + uri: 'https://odd-app-template.ipvm.app/', + lastModifiedTime: '50 minutes' + }, + { + id: 'baebfe64-02e7-4eb2-8700-da6f709b38b2', + name: 'WalletAuth', + slug: 'walletauth', + description: 'This is a great project', + teams: ['e412ac32-c1d4-46d4-aef3-3e38a9dd8e32'], + uri: 'https://odd-walletauth.ipvm.app/', + lastModifiedTime: '1 hour' + }, + { + id: 'fd54f26f-3963-437f-bg04-b1d396013625', + name: 'Auth Lobby', + slug: 'auth-lobby', + description: 'This is a great project', + teams: ['e412ac32-c1d4-46d4-aef3-3e38a9dd8e32'], + uri: 'https://auth-lobby.ipvm.app/', + lastModifiedTime: '50 minutes' + }, + { + id: '7aebf670-2405-4c15-9504-d37a26a046dc', + name: 'Ditto', + slug: 'ditto', + description: 'This is a great project', + teams: ['e412ac32-c1d4-46d4-aef3-3e38a9dd8e32'], + uri: 'https://ditto.ipvm.app/', + lastModifiedTime: '3 hours' + }, + { + id: 'f890a3b0-45a1-4329-9d09-c4f488bde2bd', + name: 'Fund Ring', + slug: 'fundring', + description: 'This is a great project', + teams: ['e412ac32-c1d4-46d4-aef3-3e38a9dd8e32'], + uri: 'https://fundring.ipvm.app/', + lastModifiedTime: '1 day' + } +] diff --git a/src/routes/tasks/[slug]/+page.svelte b/src/routes/tasks/[id]/+page.svelte similarity index 99% rename from src/routes/tasks/[slug]/+page.svelte rename to src/routes/tasks/[id]/+page.svelte index 9844310..d971c2d 100644 --- a/src/routes/tasks/[slug]/+page.svelte +++ b/src/routes/tasks/[id]/+page.svelte @@ -6,7 +6,7 @@ import '$routes/tasks/styles/markdown-styles-light.css' import { tasksStore } from '$src/stores' - $: task = $tasksStore?.tasks?.find(task => task?.id === $page.params.slug) + $: task = $tasksStore?.tasks?.find(task => task?.id === $page.params.id)
diff --git a/src/routes/teams/+page.svelte b/src/routes/teams/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/workflows/[slug]/+page.svelte b/src/routes/workflows/[id]/+page.svelte similarity index 94% rename from src/routes/workflows/[slug]/+page.svelte rename to src/routes/workflows/[id]/+page.svelte index 7830083..19534af 100644 --- a/src/routes/workflows/[slug]/+page.svelte +++ b/src/routes/workflows/[id]/+page.svelte @@ -5,9 +5,10 @@ import { workflowsStore } from '$src/stores' import chartData from '$routes/workflows/lib/chart-mocks' + import Logs from '$routes/workflows/components/Logs.svelte' $: workflow = $workflowsStore?.workflows?.find( - workflow => workflow?.id === $page.params.slug + workflow => workflow?.id === $page.params.id ) const chartValues = [0, 10, 5, 50, 20, 30, 0] @@ -159,12 +160,12 @@
-
+
{#each tabs as tab}