diff --git a/src/pages/admin/AdminPage.tsx b/src/pages/admin/AdminPage.tsx index ac7b56bb..6a9a7f1f 100644 --- a/src/pages/admin/AdminPage.tsx +++ b/src/pages/admin/AdminPage.tsx @@ -1,5 +1,8 @@ +import classNames from "classnames"; import { ReactNode, useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Icon, Icons } from "@/components/Icon"; import { ThinContainer } from "@/components/layout/ThinContainer"; import { Divider } from "@/components/utils/Divider"; import { Heading1, Heading2, Paragraph } from "@/components/utils/Text"; @@ -10,6 +13,27 @@ import { WorkerTestPart } from "@/pages/parts/admin/WorkerTestPart"; import { BackendTestPart } from "../parts/admin/BackendTestPart"; +function Button(props: { + className: string; + onClick?: () => void; + children: React.ReactNode; + disabled?: boolean; +}) { + return ( + + ); +} + function ConfigValue(props: { name: string; children?: ReactNode }) { return ( <> @@ -30,24 +54,28 @@ async function getRecentPlayedItems() { /mw_media_watch_count{tmdb_full_id="([^"]+)",provider_id="([^"]+)",title="([^"]+)",success="([^"]+)"} (\d+)/g; let match; const loop = true; - const items = []; + const items: { [key: string]: any } = {}; while (loop) { match = regex.exec(text); if (match === null) break; const [_, tmdbFullId, providerId, title, success, count] = match; - items.push({ - tmdbFullId, - providerId, - title, - success: success === "true", - count: parseInt(count, 10), - }); + if (items[tmdbFullId]) { + items[tmdbFullId].count += parseInt(count, 10); + } else { + items[tmdbFullId] = { + tmdbFullId, + providerId, + title, + success: success === "true", + count: parseInt(count, 10), + }; + } } - if (items.length > 0) { - return items; + if (Object.keys(items).length > 0) { + return Object.values(items); } throw new Error("RECENT_PLAYED_ITEMS not found"); } @@ -55,11 +83,19 @@ async function getRecentPlayedItems() { export function AdminPage() { const [recentPlayedItems, setRecentPlayedItems] = useState([]); const [loading, setLoading] = useState(true); + const [currentPage, setCurrentPage] = useState(1); + const { t } = useTranslation(); + const itemsPerPage = 10; useEffect(() => { getRecentPlayedItems() .then((items) => { - setRecentPlayedItems(items); + const uniqueItems = items.filter( + (item, index, self) => + index === self.findIndex((t2) => t2.tmdbFullId === item.tmdbFullId), + ); + + setRecentPlayedItems(uniqueItems); }) .catch((error) => { console.error("Error fetching recent played items:", error); @@ -69,6 +105,13 @@ export function AdminPage() { }); }, []); + function getItemsForCurrentPage() { + const sortedItems = recentPlayedItems.sort((a, b) => b.count - a.count); + const startIndex = (currentPage - 1) * itemsPerPage; + const endIndex = startIndex + itemsPerPage; + return sortedItems.slice(startIndex, endIndex); + } + if (loading) { return

Loading...

; } @@ -88,7 +131,7 @@ export function AdminPage() {

This data is fetched from the current backend deployment.

- {recentPlayedItems.map((item) => { + {getItemsForCurrentPage().map((item) => { const successText = item.success ? "Yes" : "No"; // Convert bool to "Yes" or "No" return ( @@ -96,6 +139,29 @@ export function AdminPage() { ); })} +
+ +
+ Page {currentPage} of{" "} + {Math.ceil(recentPlayedItems.length / itemsPerPage)} +
+ +