From 543e4fe9558b92aa94abaa434cb1c7eb389f4ae2 Mon Sep 17 00:00:00 2001 From: Ayush Sehrawat <69469790+AyushSehrawat@users.noreply.github.com> Date: Sat, 27 Jan 2024 00:24:39 +0530 Subject: [PATCH] Feat/better status page (#170) * feat: status page improvements * feat: status page improvements * feat: status page improvements --- frontend/src/routes/api/items/[id]/+server.ts | 33 ++++ frontend/src/routes/status/+page.svelte | 172 +++++++++++++----- 2 files changed, 158 insertions(+), 47 deletions(-) create mode 100644 frontend/src/routes/api/items/[id]/+server.ts diff --git a/frontend/src/routes/api/items/[id]/+server.ts b/frontend/src/routes/api/items/[id]/+server.ts new file mode 100644 index 00000000..59e75ea3 --- /dev/null +++ b/frontend/src/routes/api/items/[id]/+server.ts @@ -0,0 +1,33 @@ +import { json } from '@sveltejs/kit'; + +export const GET = async ({ fetch, params }) => { + const id: number = Number(params.id); + console.log(`Fetching extended data of item ${id} from backend`); + + async function getExtendedData() { + try { + const res = await fetch(`http://127.0.0.1:8080/items/extended/${id}`); + if (res.ok) { + return await res.json(); + } + return { + status: res.status, + statusText: res.statusText + }; + } catch (e) { + console.error(e); + return { + status: 503, + statusText: 'Unable to fetch extended data. API is down.' + }; + } + } + + const data = await getExtendedData(); + + return new Response(JSON.stringify(data), { + headers: { + 'Content-Type': 'application/json' + } + }); +}; diff --git a/frontend/src/routes/status/+page.svelte b/frontend/src/routes/status/+page.svelte index cb6c83c6..d7c0a0cf 100644 --- a/frontend/src/routes/status/+page.svelte +++ b/frontend/src/routes/status/+page.svelte @@ -5,6 +5,7 @@ import { Button } from '$lib/components/ui/button'; import { Badge } from '$lib/components/ui/badge'; import * as Tooltip from '$lib/components/ui/tooltip'; + import * as Dialog from '$lib/components/ui/dialog'; import { Loader2, ArrowUpRight, RotateCw, MoveUpRight } from 'lucide-svelte'; import { toast } from 'svelte-sonner'; import type { StatusInfo } from '$lib/types'; @@ -47,6 +48,18 @@ description: 'Items which are in your plex library but are missing some files' } }; + + let extendedDataLoading = false; + let extendedItem: any; + + async function getExtendedData(id: number) { + extendedDataLoading = true; + const res = await fetch(`/api/items/${id}`); + const data = await res.json(); + console.log(data); + extendedItem = data.item; + extendedDataLoading = false; + } @@ -110,56 +123,121 @@ {@const icebergItems = convertIcebergItemsToObject(items.items)}
- {#each Object.keys(icebergItems) as key (key)} - -
-
- -

- {statusInfo[key].text ?? formatWords(key)} -

- - -

{statusInfo[key].description}

+ {#if Object.keys(icebergItems).length === 0} +
+

No items found :(

+

+ You can request items from the content services configured. +

+
+ {:else} + {#each Object.keys(icebergItems) as key (key)} + +
+
+ +

+ {statusInfo[key].text ?? formatWords(key)} +

+ + +

{statusInfo[key].description}

+
+
+ + +
-
- - -
-
- - {#each icebergItems[key] as item} - -
-
- {item.imdb_id} -
- - {item.type === 'movie' ? 'Movie' : 'TV Show'} - + + {#each icebergItems[key] as item} + +
+
+ {item.imdb_id} +
+ + {item.type === 'movie' ? 'Movie' : 'TV Show'} + +
+ + { + console.log(open); + if (open) { + await getExtendedData(item.item_id); + } + }} + > + +

+ {item.title} +

+ + + + {item.title} + +

+ Aired {formatDate(item.aired_at, 'short')} +

+
+ {#each item.genres as genre} + + {formatWords(genre)} + + {/each} +
+ + + {#if extendedDataLoading} +
+ +

Loading item data...

+
+ {:else} +
+

+ The item was requested {formatDate(item.requested_at, 'long', true)} + by {item.requested_by}. +

+ {#if item.scraped_at} +

+ Last scraped {formatDate(item.scraped_at, 'long', true)} + for a total of + {item.scraped_times} + times. +

+ {/if} +
+ {/if} + + +

+ {formatDate(item.aired_at, 'year')} +

+

+ Requested {formatDate(item.requested_at, 'long', true)} +

-

- {item.title} -

-

- {formatDate(item.aired_at, 'year')} -

-

- Requested {formatDate(item.requested_at, 'long', true)} -

-
- - {/each} - - - {/each} + + {/each} + + + {/each} + {/if}
{:catch error}