public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-17 12:52:38 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore(web): prettier (#2821)

Browse Source 
Co-authored-by: Thomas Way <thomas@6f.io>
This commit is contained in:
Jason Rasmussen
2023-07-01 00:50:47 -04:00
committed by GitHub
parent 7c2f7d6c51
commit f55b3add80
242 changed files with 12794 additions and 13426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
web/src/lib/components/shared-components/status-box.svelte
View File

@@ -1,113 +1,109 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import Cloud from 'svelte-material-icons/Cloud.svelte';
import Dns from 'svelte-material-icons/Dns.svelte';
import LoadingSpinner from './loading-spinner.svelte';
import { api, ServerInfoResponseDto } from '@api';
import { asByteUnitString } from '../../utils/byte-units';
import { locale } from '$lib/stores/preferences.store';
import { onDestroy, onMount } from 'svelte';
import Cloud from 'svelte-material-icons/Cloud.svelte';
import Dns from 'svelte-material-icons/Dns.svelte';
import LoadingSpinner from './loading-spinner.svelte';
import { api, ServerInfoResponseDto } from '@api';
import { asByteUnitString } from '../../utils/byte-units';
import { locale } from '$lib/stores/preferences.store';
let isServerOk = true;
let serverVersion = '';
let serverInfo: ServerInfoResponseDto;
let pingServerInterval: NodeJS.Timer;
let isServerOk = true;
let serverVersion = '';
let serverInfo: ServerInfoResponseDto;
let pingServerInterval: NodeJS.Timer;
onMount(async () => {
try {
const { data: version } = await api.serverInfoApi.getServerVersion();
onMount(async () => {
try {
const { data: version } = await api.serverInfoApi.getServerVersion();
serverVersion = `v${version.major}.${version.minor}.${version.patch}`;
serverVersion = `v${version.major}.${version.minor}.${version.patch}`;
const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
serverInfo = serverInfoRes;
getStorageUsagePercentage();
} catch (e) {
console.log('Error [StatusBox] [onMount]');
isServerOk = false;
}
const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
serverInfo = serverInfoRes;
getStorageUsagePercentage();
} catch (e) {
console.log('Error [StatusBox] [onMount]');
isServerOk = false;
}
pingServerInterval = setInterval(async () => {
try {
const { data: pingReponse } = await api.serverInfoApi.pingServer();
pingServerInterval = setInterval(async () => {
try {
const { data: pingReponse } = await api.serverInfoApi.pingServer();
if (pingReponse.res === 'pong') isServerOk = true;
else isServerOk = false;
if (pingReponse.res === 'pong') isServerOk = true;
else isServerOk = false;
const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
serverInfo = serverInfoRes;
} catch (e) {
console.log('Error [StatusBox] [pingServerInterval]', e);
isServerOk = false;
}
}, 10000);
});
const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
serverInfo = serverInfoRes;
} catch (e) {
console.log('Error [StatusBox] [pingServerInterval]', e);
isServerOk = false;
}
}, 10000);
});
onDestroy(() => clearInterval(pingServerInterval));
onDestroy(() => clearInterval(pingServerInterval));
const getStorageUsagePercentage = () => {
return Math.round((serverInfo?.diskUseRaw / serverInfo?.diskSizeRaw) * 100);
};
const getStorageUsagePercentage = () => {
return Math.round((serverInfo?.diskUseRaw / serverInfo?.diskSizeRaw) * 100);
};
</script>
<div class="dark:text-immich-dark-fg">
<div class="storage-status grid grid-cols-[64px_auto]">
<div
class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-[2.15rem] group-hover:sm:pb-0 md:pb-0"
>
<Cloud size={'24'} />
</div>
<div class="hidden md:block group-hover:sm:block">
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
{#if serverInfo}
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
<div
class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
style="width: {getStorageUsagePercentage()}%"
/>
</div>
<p class="text-xs">
{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
</p>
{:else}
<div class="mt-2">
<LoadingSpinner />
</div>
{/if}
</div>
</div>
<div>
<hr class="ml-5 my-4 dark:border-immich-dark-gray" />
</div>
<div class="server-status grid grid-cols-[64px_auto]">
<div
class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-11 md:pb-0 group-hover:sm:pb-0"
>
<Dns size={'24'} />
</div>
<div class="text-xs hidden md:block group-hover:sm:block">
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
<div class="storage-status grid grid-cols-[64px_auto]">
<div class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-[2.15rem] group-hover:sm:pb-0 md:pb-0">
<Cloud size={'24'} />
</div>
<div class="hidden md:block group-hover:sm:block">
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
{#if serverInfo}
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
<div
class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
style="width: {getStorageUsagePercentage()}%"
/>
</div>
<p class="text-xs">
{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
</p>
{:else}
<div class="mt-2">
<LoadingSpinner />
</div>
{/if}
</div>
</div>
<div>
<hr class="ml-5 my-4 dark:border-immich-dark-gray" />
</div>
<div class="server-status grid grid-cols-[64px_auto]">
<div class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-11 md:pb-0 group-hover:sm:pb-0">
<Dns size={'24'} />
</div>
<div class="text-xs hidden md:block group-hover:sm:block">
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
<div class="flex justify-items-center justify-between mt-2">
<p>Status</p>
<div class="flex justify-items-center justify-between mt-2">
<p>Status</p>
{#if isServerOk}
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
{:else}
<p class="font-medium text-red-500">Offline</p>
{/if}
</div>
{#if isServerOk}
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
{:else}
<p class="font-medium text-red-500">Offline</p>
{/if}
</div>
<div class="flex justify-items-center justify-between mt-2">
<p>Version</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
{serverVersion}
</p>
</div>
</div>
</div>
<!-- <div>
<div class="flex justify-items-center justify-between mt-2">
<p>Version</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
{serverVersion}
</p>
</div>
</div>
</div>
<!-- <div>
<hr class="ml-5 my-4" />
</div>
<button class="text-xs ml-5 underline hover:cursor-pointer text-immich-primary" on:click={() => goto('/changelog')}