starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-21 16:25:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Work in progress source stats components

Browse Source
This commit is contained in:
Aleksi Lassila
2023-07-06 20:09:46 +03:00
parent c29b3e1610
commit 08ef108100
15 changed files with 202 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/routes/components/SourceStats/SonarrStats.svelte
View File

@@ -1,27 +1,37 @@
<script lang="ts">
import { formatSize } from '$lib/utils.js';
import { onMount } from 'svelte';
import StatsPlaceholder from './StatsPlaceholder.svelte';
import StatsContainer from './StatsContainer.svelte';
import SonarrIcon from '../svgs/SonarrIcon.svelte';
export let large = false;
let statsRequest: Promise<{ moviesAmount: number }> = new Promise((_) => {}) as any;
onMount(() => {
statsRequest = fetch('/radarr/stats')
.then((res) => res.json())
.then((data) => ({
moviesAmount: data?.movies?.length
}));
});
</script>
<div class="bg-highlight-dim relative w-full m-auto p-3 px-4 rounded-xl overflow-hidden">
<div class="absolute left-0 inset-y-0 w-[70%] bg-[#ffffff22]" />
<div class="relative z-[1] flex justify-between items-center">
<div class="flex flex-col">
<h3 class="text-zinc-400 font-medium text-xs tracking-wider">Mac-Mini</h3>
<a href="/" class="text-zinc-200 font-bold text-xl tracking-wide">Sonarr</a>
</div>
<div class="flex gap-8">
<div class="flex flex-col items-center gap-0.5">
<h3 class="uppercase text-zinc-400 font-medium text-xs tracking-wider">Movies</h3>
<div class="font-medium text-sm">30</div>
</div>
<div class="flex flex-col items-center gap-0.5">
<h3 class="uppercase text-zinc-400 font-medium text-xs tracking-wider">Space Taken</h3>
<div class="font-medium text-sm">{formatSize(120_000_000_000)}</div>
</div>
<div class="flex flex-col items-center gap-0.5">
<h3 class="uppercase text-zinc-400 font-medium text-xs tracking-wider">Space Left</h3>
<div class="font-medium text-sm">{formatSize(50_000_000_000)}</div>
</div>
</div>
</div>
</div>
{#await statsRequest}
<StatsPlaceholder {large} />
{:then { moviesAmount }}
<StatsContainer
{large}
title="Sonarr"
subtitle="Shows Provider"
stats={[
{ title: 'Movies', value: String(moviesAmount) },
{ title: 'Space Taken', value: formatSize(120_000_000_000) },
{ title: 'Space Left', value: formatSize(50_000_000_000) }
]}
color="#8aacfd21"
>
<SonarrIcon slot="icon" class="absolute opacity-20 p-4 h-full inset-y-0 right-2" />
</StatsContainer>
{/await}