From 90eccbc5b54a5400a05c7ab2abed60f2b1b55785 Mon Sep 17 00:00:00 2001 From: seriousm4x Date: Sat, 22 Jul 2023 22:32:59 +0200 Subject: [PATCH] add home grid and adjust nav --- frontend/src/lib/components/DeviceCard.svelte | 16 ++++++++ frontend/src/lib/components/Navbar.svelte | 39 ++++++++++++++----- frontend/src/lib/stores/pocketbase.ts | 3 +- frontend/src/routes/+layout.svelte | 27 +++++++------ frontend/src/routes/+layout.ts | 2 + frontend/src/routes/+page.svelte | 14 +++++++ frontend/src/routes/account/+page.svelte | 1 + frontend/svelte.config.js | 7 +++- 8 files changed, 85 insertions(+), 24 deletions(-) create mode 100644 frontend/src/lib/components/DeviceCard.svelte create mode 100644 frontend/src/routes/+layout.ts create mode 100644 frontend/src/routes/account/+page.svelte diff --git a/frontend/src/lib/components/DeviceCard.svelte b/frontend/src/lib/components/DeviceCard.svelte new file mode 100644 index 00000000..e26e6a5a --- /dev/null +++ b/frontend/src/lib/components/DeviceCard.svelte @@ -0,0 +1,16 @@ + + +
+
+

{device.name}

+

{device.ip}

+
+ + +
+
+
diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte index 0bc36492..9edb1765 100644 --- a/frontend/src/lib/components/Navbar.svelte +++ b/frontend/src/lib/components/Navbar.svelte @@ -2,9 +2,12 @@ import { goto } from '$app/navigation'; import { pocketbase } from '$lib/stores/pocketbase'; import { settingsPub } from '$lib/stores/settings'; + import Fa from 'svelte-fa'; + import { faCog, faHome, faCircleQuestion, faKey } from '@fortawesome/free-solid-svg-icons'; - $: console.log($pocketbase); - $: avatar = $pocketbase.authStore?.model?.avatar ? $pocketbase.authStore?.model.avatar : '0'; + $: avatar = $pocketbase.authStore?.model?.avatar + ? $pocketbase.authStore?.model.avatar + : Math.floor(Math.random() * 9).toString(); function logout() { $pocketbase.authStore.clear(); @@ -13,8 +16,8 @@
-
- +
+
{$settingsPub?.website_title ? $settingsPub?.website_title : ''} - +
-
+ +
{#if $pocketbase.authStore?.model !== null}
  • - Edit profile + Edit profile
  • logout()} on:keydown={() => logout()} role="none">Logout
    diff --git a/frontend/src/lib/stores/pocketbase.ts b/frontend/src/lib/stores/pocketbase.ts index 7b0751c8..8161bd65 100644 --- a/frontend/src/lib/stores/pocketbase.ts +++ b/frontend/src/lib/stores/pocketbase.ts @@ -1,6 +1,6 @@ import { writable } from 'svelte/store'; import PocketBase from 'pocketbase'; -import type AdminAuthResponse from 'pocketbase'; +import type { Record } from 'pocketbase'; // set backend url based on environment export const backendUrl = import.meta.env.DEV ? 'http://127.0.0.1:8090' : ''; @@ -11,3 +11,4 @@ pb.autoCancellation(false); // export stores export const pocketbase = writable(pb); +export const devices = writable([]); diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 85a4b471..54fd1316 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -3,7 +3,7 @@ import { onMount } from 'svelte'; import { goto } from '$app/navigation'; import { page } from '$app/stores'; - import { pocketbase } from '$lib/stores/pocketbase'; + import { pocketbase, backendUrl, devices } from '$lib/stores/pocketbase'; import { settingsPub } from '$lib/stores/settings'; import Navbar from '$lib/components/Navbar.svelte'; @@ -37,17 +37,18 @@ } if ($pocketbase.authStore.model?.collectionName === 'users') { - $pocketbase - .collection('users') - .authRefresh() - .catch(() => { - $pocketbase.authStore.clear(); - }); + $pocketbase.collection('users').authRefresh(); } else { - $pocketbase.admins.authRefresh().catch(() => { - $pocketbase.authStore.clear(); - }); + $pocketbase.admins.authRefresh(); } + + // fill devices store + $pocketbase + .collection('devices') + .getFullList({ perPage: 1000 }) + .then((data) => { + devices.set(data); + }); }); @@ -55,7 +56,7 @@ @@ -64,4 +65,6 @@ {/if} - +
    + +
    diff --git a/frontend/src/routes/+layout.ts b/frontend/src/routes/+layout.ts new file mode 100644 index 00000000..ba58d860 --- /dev/null +++ b/frontend/src/routes/+layout.ts @@ -0,0 +1,2 @@ +export const prerender = true; +export const trailingSlash = 'always'; diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index e69de29b..1efef612 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -0,0 +1,14 @@ + + +{#each $devices as device} +
    + +
    +{:else} +
    No devices
    +{/each} diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte new file mode 100644 index 00000000..ba7a6f95 --- /dev/null +++ b/frontend/src/routes/account/+page.svelte @@ -0,0 +1 @@ +account diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js index 1f68cd2f..dccf80d5 100644 --- a/frontend/svelte.config.js +++ b/frontend/svelte.config.js @@ -11,7 +11,12 @@ const config = { // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // If your environment is not supported or you settled on a specific environment, switch out the adapter. // See https://kit.svelte.dev/docs/adapters for more information about adapters. - adapter: adapter() + adapter: adapter({ + fallback: 'index.html' + }), + prerender: { + entries: ['/', '/login', '/welcome'] + } } };