Various improvements and fixes

This commit is contained in:
Aleksi Lassila
2023-07-10 14:39:40 +03:00
parent 494a3bf85a
commit a6a994fa05
18 changed files with 21179 additions and 20727 deletions

View File

@@ -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>

View File

@@ -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 }}