tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-03 19:29:32 -05:00
Code Issues 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 { browser } from '$app/environment';
import { locale } from '$lib/stores/preferences.store'; import { locale } from '$lib/stores/preferences.store';
import { websocketStore } from '$lib/stores/websocket'; import { websocketStore } from '$lib/stores/websocket';
import { ServerInfoResponseDto, api } from '@api'; import { api } from '@api';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import { asByteUnitString } from '../../utils/byte-units'; import { asByteUnitString } from '../../utils/byte-units';
import LoadingSpinner from './loading-spinner.svelte'; import LoadingSpinner from './loading-spinner.svelte';
import { mdiCloud, mdiDns } from '@mdi/js'; import { mdiCloud, mdiDns } from '@mdi/js';
import { serverInfoStore } from '$lib/stores/server-info.store';
const { serverVersion, connected } = websocketStore; const { serverVersion, connected } = websocketStore;
let serverInfo: ServerInfoResponseDto;
$: version = $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null; $: 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 () => { onMount(async () => {
await refresh(); await refresh();
@ -23,7 +22,7 @@
const refresh = async () => { const refresh = async () => {
try { try {
const { data } = await api.serverInfoApi.getServerInfo(); const { data } = await api.serverInfoApi.getServerInfo();
serverInfo = data; $serverInfoStore = data;
} catch (e) { } catch (e) {
console.log('Error [StatusBox] [onMount]'); console.log('Error [StatusBox] [onMount]');
} }
@ -44,7 +43,7 @@
</div> </div>
<div class="hidden group-hover:sm:block md:block"> <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> <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"> <div class="my-2 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
<!-- style={`width: ${$downloadAssets[fileName]}%`} --> <!-- style={`width: ${$downloadAssets[fileName]}%`} -->
<div <div
@ -53,8 +52,8 @@
/> />
</div> </div>
<p class="text-xs"> <p class="text-xs">
{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of {asByteUnitString($serverInfoStore?.diskUseRaw, $locale)} of
{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used {asByteUnitString($serverInfoStore?.diskSizeRaw, $locale)} used
</p> </p>
{:else} {:else}
<div class="mt-2"> <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>();