Max/ppc_amnet
1
0
Fork 0
mirror of https://gitea.tendokyu.moe/ppc/amnet.git synced 2026-09-27 00:50:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

simplify server page

Browse Source
This commit is contained in:
ppc
2024-08-08 17:04:13 +01:00
parent 0c168554c0
commit ab2fa10d89
1 changed files with 39 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aimenet-web/app/servers/[serverId]/page.tsx
+39 -29
View File
@@ -3,7 +3,7 @@
import {useLiveQuery} from "dexie-react-hooks";
import React, {useEffect, useState} from "react";
import {useParams, useRouter} from "next/navigation";
import {ChevronRight, Circle, CircleCheckBig, Home, Plus, ServerOff} from "lucide-react";
import {ChevronRight, Circle, CircleCheckBig, Home, Pencil, Plus, ServerOff, Wallet} from "lucide-react";
import {AimeCard, AimeServer, db} from "@/lib/database";
import {getServerInfo, serverCardIn} from "@/lib/aime-net";
import {Button} from "@/components/ui/button";
@@ -19,13 +19,21 @@ import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
function CardList(props: { cards: ReadonlyArray<AimeCard> | null, cardSelected: (card: AimeCard) => void }) {
const router = useRouter();
return (<>
<h4 className="text-2xl font-bold">{props.cards?.length ? "Cards" : "Additional Cards"}</h4>
<CardCreationDialog>
<Button className="bg-blue-500">
<Plus className="mr-2 h-4 w-4"/> Add Card
<div className="flex gap-2">
<CardCreationDialog>
<Button className="bg-blue-500 flex-grow">
<Plus className="mr-2 h-4 w-4"/> Add Card
</Button>
</CardCreationDialog>
<Button onClick={() => router.push('/cards')} variant="outline" size="icon">
<Wallet className="h-4 w-4"/>
</Button>
</CardCreationDialog>
</div>
{props.cards?.length ? props.cards.map(x => <AimeCardEntry card={x} key={x.id}>
<TooltipProvider>
@@ -137,34 +145,36 @@ export default function ServerPage() {
</AlertDescription>
</Alert>)}
<div className="flex flex-col gap-4 w-full flex-grow">
{selectedCard && (<>
<h4 className="text-2xl font-bold">Selected Card</h4>
{server && (
<div className="flex flex-col gap-4 w-full flex-grow">
{selectedCard && (<>
<h4 className="text-2xl font-bold">Selected Card</h4>
<AimeCardEntry card={selectedCard}>
<Button size="icon" variant="ghost" disabled>
<CircleCheckBig className="w-5 h-5 text-green-500"/>
<AimeCardEntry card={selectedCard}>
<Button size="icon" variant="ghost" disabled>
<CircleCheckBig className="w-5 h-5 text-green-500"/>
</Button>
</AimeCardEntry>
<Button className="flex-grow-0 bg-green-600 mb-5"
disabled={(cardInStatus || connectionError || !server)}
onClick={() => performCardInAction(selectedCard, server as AimeServer, setCardInStatus, toast)}>
{cardInStatus ? "Carding in..." : <>Card In <ChevronRight className="ml-2 h-4 w-4"/></>}
</Button>
</AimeCardEntry>
</>)}
<Button className="flex-grow-0 bg-green-600 mb-5"
disabled={(cardInStatus || connectionError)}
onClick={() => performCardInAction(selectedCard, server as AimeServer, setCardInStatus, toast)}>
{cardInStatus ? "Carding in..." : <>Card In <ChevronRight className="ml-2 h-4 w-4"/></>}
</Button>
</>)}
<CardList cards={cards?.filter(x => x !== selectedCard).sort(x => x.lastUsed) ?? null}
cardSelected={card => {
toast({
duration: 2500,
title: "Card Selected",
description: `${card.name} has been selected.`
});
<CardList cards={cards?.filter(x => x !== selectedCard).sort(x => x.lastUsed) ?? null}
cardSelected={card => {
toast({
duration: 2500,
title: "Card Selected",
description: `${card.name} has been selected.`
});
setSelectedCard(card);
}}/>
</div>
setSelectedCard(card);
}}/>
</div>
)}
<Footer/>
</main>