add card to inform user of new versions

This commit is contained in:
maxid
2025-12-06 22:38:28 +01:00
parent e522fa9801
commit d1eee14b79
3 changed files with 82 additions and 45 deletions

View File

@@ -1,20 +1,20 @@
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
let {title, content, footer}: { title: string, content: any, footer: string } = $props()
import * as Card from '$lib/components/ui/card/index.js';
// eslint-disable-next-line
let { title, footer, children }: { title: string; footer: string; children: any } = $props();
</script>
<Card.Root>
<Card.Header>
<Card.Title><p>{title}</p></Card.Title>
</Card.Header>
<Card.Content>
<p class="text-2xl font-extrabold leading-0">{content ?? "Error"}</p>
</Card.Content>
<Card.Footer>
<Card.Description >
<p>{footer}</p>
</Card.Description>
</Card.Footer>
<Card.Header>
<Card.Title><p>{title}</p></Card.Title>
</Card.Header>
<Card.Content>
<p class="text-3xl font-extrabold">{@render children?.()}</p>
</Card.Content>
<Card.Footer>
<Card.Description>
<p>{footer}</p>
</Card.Description>
</Card.Footer>
</Card.Root>

View File

@@ -1,39 +1,67 @@
<script lang="ts">
import { Badge } from "$lib/components/ui/badge/index.js";
import Card from "$lib/components/stats/card.svelte";
import { onMount } from 'svelte';
import client from '$lib/api';
import type { components } from '$lib/api/api.d.ts';
import Card from '$lib/components/stats/card.svelte';
import { onMount } from 'svelte';
import client from '$lib/api';
import { isSemver, semverIsGreater } from '$lib/utils.ts';
import { env } from '$env/dynamic/public';
import { resolve } from '$app/paths';
let moviesCount: string | null = $state(null);
let episodeCount: string | null = $state(null);
let showCount: string | null = $state(null);
let torrentCount: string | null = $state(null);
let moviesCount: string | null = $state(null);
let episodeCount: string | null = $state(null);
let showCount: string | null = $state(null);
let torrentCount: string | null = $state(null);
let installedVersion: string | undefined = env.PUBLIC_VERSION;
let releaseUrl: string | null = $state(null);
let newestVersion: string | null = $state(null);
onMount(async () => {
let tvShows = await client.GET("/api/v1/tv/shows")
if(!tvShows.error)
showCount = tvShows.data.length.toString().padStart(3, "0");
onMount(async () => {
let tvShows = await client.GET('/api/v1/tv/shows');
if (!tvShows.error) showCount = tvShows.data.length.toString().padStart(3, '0');
let episodes = await client.GET("/api/v1/tv/episodes/count")
if(!episodes.error)
episodeCount = episodes.data.toString().padStart(3, "0")
let episodes = await client.GET('/api/v1/tv/episodes/count');
if (!episodes.error) episodeCount = episodes.data.toString().padStart(3, '0');
let movies = await client.GET("/api/v1/movies")
if(!movies.error)
moviesCount= movies.data.length.toString().padStart(3, "0")
let movies = await client.GET('/api/v1/movies');
if (!movies.error) moviesCount = movies.data.length.toString().padStart(3, '0');
let torrents = await client.GET("/api/v1/torrent")
if(!torrents.error)
torrentCount = torrents.data.length.toString().padStart(3, "0")
})
let torrents = await client.GET('/api/v1/torrent');
if (!torrents.error) torrentCount = torrents.data.length.toString().padStart(3, '0');
let releases = await fetch('https://api.github.com/repos/maxdorninger/mediamanager/releases');
if (releases.ok) {
let latestRelease = await releases.json().then((x) => x[0]);
newestVersion = latestRelease.tag_name.toString().replace(/v*/, '');
releaseUrl = latestRelease.html_url;
}
});
</script>
<div
class="lg:grid-cols-2 xl:grid-cols-4 grid grid-cols-1 gap-4 px-4 lg:px-6"
>
<Card title="TV Shows" content={showCount} footer="Total count of downloaded episodes"></Card>
<Card title="Episodes" content={episodeCount} footer="Total count of downloaded episodes"></Card>
<Card title="Movies" content={moviesCount} footer="Total count of movies"></Card>
<Card title="Torrents" content={torrentCount} footer="Total count of torrents/NZBs"></Card>
</div>
<div class="flex flex-wrap gap-2">
<div class="flex-auto">
<Card title="TV Shows" footer="Total count of downloaded episodes">{showCount ?? 'Error'}</Card>
</div>
<div class="flex-auto">
<Card title="Episodes" footer="Total count of downloaded episodes"
>{episodeCount ?? 'Error'}</Card
>
</div>
<div class="flex-auto">
<Card title="Movies" footer="Total count of movies">{moviesCount ?? 'Error'}</Card>
</div>
<div class="flex-auto">
<Card title="Torrents" footer="Total count of torrents/NZBs">{torrentCount ?? 'Error'}</Card>
</div>
<div class="flex-auto">
{#if semverIsGreater(newestVersion ?? '', installedVersion ?? '') || !isSemver(installedVersion ?? '')}
<Card title="New version available!" footer="A new version of MediaManager is available!">
<a
target="_blank"
href={resolve(releaseUrl ?? 'https://github.com/maxdorninger/MediaManager/releases')}
class="underline"
>
{installedVersion} → v{newestVersion}
</a>
</Card>
{/if}
</div>
</div>

View File

@@ -118,3 +118,12 @@ export function saveDirectoryPreview(
}
return path;
}
export function semverIsGreater(a: string, b: string) {
return a.localeCompare(b, undefined, { numeric: true }) === 1;
}
export function isSemver(str: string) {
return str.match(
/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/
);
}