starred/UpSnap
1
0
Fork 0
mirror of https://github.com/seriousm4x/UpSnap.git synced 2026-07-23 05:53:55 -04:00
Code Issues Packages Projects Releases Wiki Activity

improve home loading, remove $devices store

Browse Source
This commit is contained in:
seriousm4x
2023-08-05 14:08:26 +02:00
parent 3ffd3c6a41
commit 90baf0aef8
3 changed files with 40 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/stores/pocketbase.ts
View File

@@ -1,6 +1,5 @@
import { writable } from 'svelte/store';
import PocketBase from 'pocketbase';
import type { Device } from '$lib/types/device';
// set backend url based on environment
export const backendUrl = import.meta.env.DEV ? 'http://127.0.0.1:8090/' : '/';
@@ -11,4 +10,3 @@ pb.autoCancellation(false);
// export stores
export const pocketbase = writable(pb);
export const devices = writable<Device[]>([]);

2
frontend/src/routes/+layout.svelte
View File

@@ -3,7 +3,7 @@
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { pocketbase, backendUrl, devices } from '$lib/stores/pocketbase';
import { pocketbase, backendUrl } from '$lib/stores/pocketbase';
import { settingsPub } from '$lib/stores/settings';
import Navbar from '$lib/components/Navbar.svelte';
import Transition from '$lib/components/Transition.svelte';

57
frontend/src/routes/+page.svelte
View File

@@ -1,36 +1,57 @@
<script lang="ts">
import DeviceCard from '$lib/components/DeviceCard.svelte';
import { pocketbase, devices } from '$lib/stores/pocketbase';
import { onMount } from 'svelte';
import { pocketbase } from '$lib/stores/pocketbase';
import DeviceCard from '$lib/components/DeviceCard.svelte';
import Alert from '$lib/components/Alert.svelte';
import Fa from 'svelte-fa';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
import { faPlus, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
import type { Device } from '$lib/types/device';
onMount(async () => {
await getAllDevices();
let devices = [] as Device[];
let loading = true;
let err = false;
$pocketbase.collection('devices').subscribe('*', async () => {
await getAllDevices();
function getAllDevices() {
$pocketbase
.collection('devices')
.getFullList(1000, { sort: 'name', expand: 'ports,groups' })
.then((resp) => {
devices = resp as Device[];
})
.catch(() => {
err = true;
})
.finally(() => {
loading = false;
});
}
onMount(() => {
getAllDevices();
$pocketbase.collection('devices').subscribe('*', () => {
getAllDevices();
});
$pocketbase.collection('ports').subscribe('*', async () => {
await getAllDevices();
$pocketbase.collection('ports').subscribe('*', () => {
getAllDevices();
});
});
async function getAllDevices() {
const resp = await $pocketbase
.collection('devices')
.getFullList(1000, { sort: 'name', expand: 'ports,groups' });
devices.set(resp as Device[]);
}
</script>
{#if $devices.length > 0}
{#if loading}
<div class="container max-w-lg mx-auto text-center">
<span class="loading loading-dots loading-lg" />
</div>
{:else if err}
<div class="container max-w-lg mx-auto">
<Alert color="error" message="Failed to get devices from api." icon={faTriangleExclamation} />
</div>
{:else if devices.length > 0}
<div
class="grid grid-flow-row-dense grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4"
>
{#each $devices as device}
{#each devices as device}
<DeviceCard {device} />
{/each}
</div>