mirror of
https://github.com/aleksilassila/reiverr.git
synced 2026-04-22 00:35:12 +02:00
Various improvements and fixes
This commit is contained in:
@@ -1,33 +1,49 @@
|
||||
<script lang="ts">
|
||||
import { formatSize, log } from '$lib/utils.js';
|
||||
import StatsPlaceholder from './StatsPlaceholder.svelte';
|
||||
import StatsContainer from './StatsContainer.svelte';
|
||||
import { PUBLIC_RADARR_BASE_URL } from '$env/static/public';
|
||||
import { getDiskSpace } from '$lib/apis/radarr/radarrApi';
|
||||
import { library } from '$lib/stores/library.store';
|
||||
import { formatSize } from '$lib/utils.js';
|
||||
import RadarrIcon from '../svgs/RadarrIcon.svelte';
|
||||
import StatsContainer from './StatsContainer.svelte';
|
||||
import StatsPlaceholder from './StatsPlaceholder.svelte';
|
||||
|
||||
export let large = false;
|
||||
|
||||
async function fetchStats() {
|
||||
return fetch('/radarr/stats')
|
||||
.then((res) => res.json())
|
||||
.then(log)
|
||||
.then((data) => ({
|
||||
moviesAmount: data?.movies?.length
|
||||
}));
|
||||
const discSpacePromise = getDiskSpace();
|
||||
const { movies } = await $library;
|
||||
const availableMovies = movies.filter(
|
||||
(movie) => !movie.download && movie.isAvailable && movie.hasFile
|
||||
);
|
||||
|
||||
const diskSpaceInfo =
|
||||
(await discSpacePromise).find((disk) => disk.path === '/') || (await discSpacePromise)[0];
|
||||
|
||||
const spaceOccupied = availableMovies.reduce((acc, movie) => acc + (movie.sizeOnDisk || 0), 0);
|
||||
|
||||
return {
|
||||
moviesAmount: availableMovies.length,
|
||||
spaceLeft: diskSpaceInfo.freeSpace || 0,
|
||||
spaceOccupied,
|
||||
spaceTotal: diskSpaceInfo.totalSpace || 0
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await fetchStats()}
|
||||
<StatsPlaceholder {large} />
|
||||
{:then { moviesAmount }}
|
||||
{:then { moviesAmount, spaceLeft, spaceOccupied, spaceTotal }}
|
||||
<StatsContainer
|
||||
{large}
|
||||
title="Radarr"
|
||||
subtitle="Movies Provider"
|
||||
href={PUBLIC_RADARR_BASE_URL}
|
||||
stats={[
|
||||
{ title: 'Movies', value: String(moviesAmount) },
|
||||
{ title: 'Space Taken', value: formatSize(120_000_000_000) },
|
||||
{ title: 'Space Left', value: formatSize(50_000_000_000) }
|
||||
{ title: 'Space Taken', value: formatSize(spaceOccupied) },
|
||||
{ title: 'Space Left', value: formatSize(spaceLeft) }
|
||||
]}
|
||||
fillPercentage={((spaceTotal - spaceLeft) / spaceTotal) * 100}
|
||||
>
|
||||
<RadarrIcon slot="icon" class="absolute opacity-20 p-4 h-full inset-y-0 right-2" />
|
||||
</StatsContainer>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import classNames from 'classnames';
|
||||
import RadarrIcon from '../svgs/RadarrIcon.svelte';
|
||||
|
||||
type Stat = {
|
||||
title: string;
|
||||
@@ -10,6 +9,8 @@
|
||||
export let title: string;
|
||||
export let subtitle: string;
|
||||
export let stats: Stat[] = [];
|
||||
export let href = '#';
|
||||
export let fillPercentage = 0;
|
||||
|
||||
export let color: string = '#fde68a20';
|
||||
export let large = false;
|
||||
@@ -22,7 +23,7 @@
|
||||
})}
|
||||
style={'background-color: ' + color + ';'}
|
||||
>
|
||||
<div class="absolute left-0 inset-y-0 w-[70%] bg-[#ffffff22]" />
|
||||
<div class="absolute left-0 inset-y-0 bg-[#ffffff22]" style={'width: ' + fillPercentage + '%;'} />
|
||||
{#if large}
|
||||
<slot name="icon" />
|
||||
{/if}
|
||||
@@ -34,7 +35,7 @@
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-zinc-400 font-medium text-xs tracking-wider">{subtitle}</h3>
|
||||
<a href="/static" class="text-zinc-200 font-bold text-xl tracking-wide">{title}</a>
|
||||
<a target="_blank" {href} class="text-zinc-200 font-bold text-xl tracking-wide">{title}</a>
|
||||
</div>
|
||||
<div class="flex gap-8">
|
||||
{#each stats as { title, value }}
|
||||
|
||||
Reference in New Issue
Block a user