beenull/immich
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix(web): status box rendering (#5410)

Browse source 
* fix(web): status box rendering

* Syntax improvement for api import

Co-authored-by: martin <74269598+martabal@users.noreply.github.com>

---------

Co-authored-by: Daniel Taylor <daniel.k.taylor1@gmail.com>
Co-authored-by: martin <74269598+martabal@users.noreply.github.com>
This commit is contained in:
Dan Taylor 2023-12-01 18:26:48 -08:00 committed by GitHub
parent a02e91169d
commit 6673f1eb24
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/lib/components/shared-components/status-box.svelte
View file

@ -2,19 +2,18 @@
import { browser } from '$app/environment';
import { locale } from '$lib/stores/preferences.store';
import { websocketStore } from '$lib/stores/websocket';
import { ServerInfoResponseDto, api } from '@api';
import { api } from '@api';
import { onDestroy, onMount } from 'svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { asByteUnitString } from '../../utils/byte-units';
import LoadingSpinner from './loading-spinner.svelte';
import { mdiCloud, mdiDns } from '@mdi/js';
import { serverInfoStore } from '$lib/stores/server-info.store';
const { serverVersion, connected } = websocketStore;
let serverInfo: ServerInfoResponseDto;
$: version = $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null;
$: usedPercentage = Math.round((serverInfo?.diskUseRaw / serverInfo?.diskSizeRaw) * 100);
$: usedPercentage = Math.round(($serverInfoStore?.diskUseRaw / $serverInfoStore?.diskSizeRaw) * 100);
onMount(async () => {
await refresh();
@ -23,7 +22,7 @@
const refresh = async () => {
try {
const { data } = await api.serverInfoApi.getServerInfo();
serverInfo = data;
$serverInfoStore = data;
} catch (e) {
console.log('Error [StatusBox] [onMount]');
}
@ -44,7 +43,7 @@
</div>
<div class="hidden group-hover:sm:block md:block">
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
{#if serverInfo}
{#if $serverInfoStore}
<div class="my-2 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
<div
@ -53,8 +52,8 @@
/>
</div>
<p class="text-xs">
{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
{asByteUnitString($serverInfoStore?.diskUseRaw, $locale)} of
{asByteUnitString($serverInfoStore?.diskSizeRaw, $locale)} used
</p>
{:else}
<div class="mt-2">

4
web/src/lib/stores/server-info.store.ts Normal file
View file

@ -0,0 +1,4 @@
import { writable } from 'svelte/store';
import type { ServerInfoResponseDto } from '@api';
export const serverInfoStore = writable<ServerInfoResponseDto>();