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

add share button to page footer

Browse Source
This commit is contained in:
ppc
2024-08-22 08:22:01 +01:00
parent 3410ac67d7
commit e84176e940
1 changed files with 55 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
amnet-web/src/pages/card-in-screen.tsx
+55 -29
View File
@@ -1,4 +1,4 @@
import {useEffect, useState} from "react";
import {useEffect, useMemo, useState} from "react";
import {useNavigate, useParams} from "react-router-dom";
import {useLiveQuery} from "dexie-react-hooks";
import {CircleDot, CircleCheckBig, Home, Nfc, Wallet, WifiOff} from "lucide-react";
@@ -28,6 +28,7 @@ import {LoadingIndicator} from "@/components/loading-indicator";
import {CardCreationDialog} from "@/components/card-creation-form";
import {NoCardsNotification} from "@/components/no-cards-notification";
import {IncognitoStorageWarning} from "@/components/incognito-warning.tsx";
import {Separator} from "@/components/ui/separator.tsx";
/* eslint-disable @typescript-eslint/no-explicit-any */
@@ -87,11 +88,15 @@ function ServerCardInPage() {
const cards = useLiveQuery(() => db.cards.toArray());
const [server, setServer] = useState<AimeServer | null>(null);
const [cardInStatus, setCardInStatus] = useState(false);
const [connectionError, setConnectionError] = useState(false);
const [selectedCard, setSelectedCard] = useState<AimeCard | null>(null);
const [serverReloadCounter, setServerReloadCounter] = useState(0);
const [cardInStatus, setCardInStatus] = useState(false);
const [selectedCard, setSelectedCard] = useState<AimeCard | null>(null);
const [connectionError, setConnectionError] = useState(false);
const shareUrl = useMemo(() => `${location.origin}/#/servers/add?address=${encodeURIComponent(server?.address ?? "")}`, [server]);
// select newest card
useEffect(() => setSelectedCard(cards?.sort((a, b) => b.lastUsed - a.lastUsed)[0] ?? null), [cards]);
useEffect(() => {
@@ -147,7 +152,8 @@ function ServerCardInPage() {
<AlertDescription>
There was an issue connecting to <code
className="max-w-full text-wrap">{server.address}</code>.
Please check the game is running and <span className="underline cursor-pointer" onClick={() => setServerReloadCounter(serverReloadCounter + 1)}>try again</span>.
Please check the game is running and <span className="underline cursor-pointer"
onClick={() => setServerReloadCounter(serverReloadCounter + 1)}>try again</span>.
</AlertDescription>
</Alert>
: <IncognitoStorageWarning/>}
@@ -183,31 +189,51 @@ function ServerCardInPage() {
</div>
)}
<AMFooter className="flex flex-col-reverse sm:flex-row sm:flex-wrap justify-center sm:justify-between gap-2">
<AMFooter
className="flex flex-col-reverse sm:flex-row sm:flex-wrap justify-center sm:justify-between sm:gap-2 gap-4">
{server?.id && (
<AlertDialog>
<AlertDialogTrigger>
<p className="text-sm text-red-700">Delete {server.serverName}</p>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
<AlertDialogDescription>
You'll need to re-enter the server information if you want to use it in the
future...
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={async () => {
await db.servers.delete(server.id);
navigate('/');
}}>
Continue
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<div className="flex items-center justify-center sm:gap-5 gap-2">
{location.protocol === "https:" ? (
<p className="text-sm text-blue-500" role="button"
onClick={() => navigator.share({url: shareUrl})}>
Share
</p>
) : (
<p className="text-sm text-blue-500" role="button"
onClick={() => navigator.clipboard.writeText(shareUrl).then(() => {
toast({
description: "Server URL has been copied to clipboard.",
duration: 2500
})
})}>
Copy URL
</p>
)}
<Separator orientation="vertical"/>
<AlertDialog>
<AlertDialogTrigger>
<p className="text-sm text-red-700">Delete {server.serverName}</p>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
<AlertDialogDescription>
You'll need to re-enter the server information if you want to use it in the
future...
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={async () => {
await db.servers.delete(server.id);
navigate('/');
}}>
Continue
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
)}
</AMFooter>
</main>