finalizing the frontend for the movies

2026-04-26 18:55:44 +02:00 · 2025-06-28 19:31:48 +02:00
parent bcc259dff2
commit f7035082e8
6 changed files with 207 additions and 19 deletions
--- a/web/src/routes/dashboard/movies/requests/+layout.ts
+++ b/web/src/routes/dashboard/movies/requests/+layout.ts
@@ -0,0 +1,34 @@
+import {env} from '$env/dynamic/public';
+import type {LayoutLoad} from './$types';
+
+const apiUrl = env.PUBLIC_API_URL;
+export const load: LayoutLoad = async ({fetch}) => {
+    try {
+        const requests = await fetch(`${apiUrl}/movies/requests`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            credentials: 'include'
+        });
+
+        if (!requests.ok) {
+            console.error(`Failed to fetch season requests ${requests.statusText}`);
+            return {
+                requestsData: null
+            };
+        }
+
+        const requestsData = await requests.json();
+        console.log('Fetched season requests:', requestsData);
+
+        return {
+            requestsData: requestsData
+        };
+    } catch (error) {
+        console.error('Error fetching season requests:', error);
+        return {
+            requestsData: null
+        };
+    }
+};
--- a/web/src/routes/dashboard/movies/requests/+page.svelte
+++ b/web/src/routes/dashboard/movies/requests/+page.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import {page} from '$app/state';
+    import {Separator} from '$lib/components/ui/separator/index.js';
+    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+    import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+    import type {SeasonRequest} from '$lib/types';
+    import RequestsTable from '$lib/components/season-requests-table.svelte';
+
+    let requests = $state(page.data.requestsData);
+</script>
+
+<header class="flex h-16 shrink-0 items-center gap-2">
+    <div class="flex items-center gap-2 px-4">
+        <Sidebar.Trigger class="-ml-1"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
+        <Breadcrumb.Root>
+            <Breadcrumb.List>
+                <Breadcrumb.Item class="hidden md:block">
+                    <Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Link href="/dashboard/movies">Movies</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Page>Movie Requests</Breadcrumb.Page>
+                </Breadcrumb.Item>
+            </Breadcrumb.List>
+        </Breadcrumb.Root>
+    </div>
+</header>
+
+<div class="flex w-full flex-1 flex-col items-center gap-4 p-4 pt-0">
+    <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
+        Movie Requests
+    </h1>
+    <RequestsTable bind:requests isShow={false}/>
+</div>
--- a/web/src/routes/dashboard/movies/torrents/+page.svelte
+++ b/web/src/routes/dashboard/movies/torrents/+page.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+    import {page} from '$app/state';
+    import {Separator} from '$lib/components/ui/separator/index.js';
+    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+    import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+    import type {RichMovieTorrent, RichShowTorrent} from '$lib/types';
+    import {getFullyQualifiedMediaName} from '$lib/utils';
+    import * as Accordion from '$lib/components/ui/accordion/index.js';
+    import * as Card from '$lib/components/ui/card/index.js';
+    import TorrentTable from '$lib/components/torrent-table.svelte';
+    import {onMount} from "svelte";
+    import {env} from '$env/dynamic/public';
+    import {toast} from "svelte-sonner";
+
+    const apiUrl = env.PUBLIC_API_URL;
+    let torrents: RichMovieTorrent[] = [];
+    onMount(async () => {
+        const res = await fetch(apiUrl + '/movies/torrents', {
+            method: 'GET',
+            credentials: 'include'
+        });
+        if (!res.ok) {
+            toast.error("Failed to fetch torrents");
+            throw new Error(`Failed to fetch torrents: ${res.status} ${res.statusText}`);
+        }
+        torrents = await res.json();
+        console.log("got torrents: ", torrents);
+
+    })
+</script>
+
+<header class="flex h-16 shrink-0 items-center gap-2">
+    <div class="flex items-center gap-2 px-4">
+        <Sidebar.Trigger class="-ml-1"/>
+        <Separator class="mr-2 h-4" orientation="vertical"/>
+        <Breadcrumb.Root>
+            <Breadcrumb.List>
+                <Breadcrumb.Item class="hidden md:block">
+                    <Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block"/>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Page>TV Torrents</Breadcrumb.Page>
+                </Breadcrumb.Item>
+            </Breadcrumb.List>
+        </Breadcrumb.Root>
+    </div>
+</header>
+
+<div class="flex w-full flex-1 flex-col items-center gap-4 p-4 pt-0">
+    <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
+        TV Torrents
+    </h1>
+    <Accordion.Root class="w-full" type="single">
+        {#each torrents as movie}
+            <div class="p-6">
+                <Card.Root>
+                    <Card.Header>
+                        <Card.Title>
+                            {getFullyQualifiedMediaName(movie)}
+                        </Card.Title>
+                    </Card.Header>
+                    <Card.Content>
+                        <TorrentTable isShow={false} torrents={movie.torrents}/>
+                    </Card.Content>
+                </Card.Root>
+            </div>
+        {:else}
+            <div class="col-span-full text-center text-muted-foreground">No Torrents added yet.</div>
+        {/each}
+    </Accordion.Root>
+</div>
--- a/web/src/routes/dashboard/movies/torrents/+page.ts
+++ b/web/src/routes/dashboard/movies/torrents/+page.ts
@@ -0,0 +1,8 @@
+import {env} from '$env/dynamic/public';
+import type {PageLoad} from './$types';
+
+const apiUrl = env.PUBLIC_API_URL;
+
+export const load: PageLoad = async ({fetch}) => {
+
+};
--- a/web/src/routes/dashboard/tv/requests/+page.svelte
+++ b/web/src/routes/dashboard/tv/requests/+page.svelte
@@ -39,5 +39,5 @@
 	<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
 		Season Requests
 	</h1>
-    <RequestsTable bind:requests/>
+	<RequestsTable bind:requests isShow={true}/>
 </div>