brawlset/app/app/account/profile/decks/page.tsx
2024-12-27 16:41:39 +01:00

265 lines
8.5 KiB
TypeScript

'use client'
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useEffect, useState } from "react"
import { useRouter } from 'next/navigation'
import { getCookie } from "@/lib/utils"
import { Textarea } from "@/components/ui/textarea"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import type { deck, bset } from "@prisma/client";
interface bsetJson extends bset {
set_codes: string[],
icons: string[]
}
interface cardEntryAPIProps {
amount: number,
sanitized_name: string,
set: string
}
interface deckAPIProps {
name: string,
selected_bset: string,
commander_name: string,
cards: cardEntryAPIProps[]
}
export default function Signin() {
const [deckName, setDeckName] = useState("")
const [deckCommanderName, setDeckCommanderName] = useState("")
const [deckImporter, setDeckImporter] = useState("")
const [selectedBset, setSelectedBset] = useState("")
const [decks, setDecks] = useState<deck[]>([])
const [bsets, setBsets] = useState<bsetJson[]>([])
const [openSelectBset, setOpenSelectBset] = useState(false)
const router = useRouter()
const token = getCookie('JWT')
useEffect(() => {
if(getCookie('JWT') == "") {
router.refresh()
router.push('/')
}
fetch('http://localhost:3000/api/account/decks/', {
method: "GET",
headers: {Authorization: 'Bearer ' + token},
}).then((res) => {
if(res.status == 200) {
res.json().then((apiData) => {
setDecks(apiData.data)
})
}
})
fetch('http://localhost:8072/misc/bsets.json').then((res) => {
if(res.status == 200) {
res.json().then((data) => {
setBsets(data)
})
}
})
},[])
function getDataFromLine(line: string){
if(line != "") {
const values = line.split(" ")
if (values.length >= 4) {
const amount: number = parseInt(values.at(0)!.toString())
let set_index = 0
for(let i = 1; i < values.length; i++){
if(values.at(-i)!.toString().match(/\([A-Z]{3}\)/gm)){
set_index = -i
}
}
const set = values.at(set_index)!.toString().replace(/[()]/gm,"").toLowerCase()
const card_name = values.slice(1,set_index).join(" ").replace(/[^a-zA-Z0-9]/gim,"-").toLowerCase()
const card_data : cardEntryAPIProps = {amount, sanitized_name: card_name, set}
return card_data
} else {
return null
}
} else {
return null
}
}
function deleteDeck(id:string){
fetch('http://localhost:3000/api/account/decks/delete', {
method: "DELETE",
headers: {Authorization: 'Bearer ' + token},
body: JSON.stringify({ id })
}).then((res) => {
if(res.status == 200) {
setDecks(old => old.filter((deck: deck) => deck.id != id))
}
})
}
function updateDeckInput(txt:string){
setDeckImporter(txt)
const lines = txt.split("\n")
setDeckCommanderName(lines[0])
}
function importDeck(){
const deckText = deckImporter
const lines = deckText.split("\n")
const dataToSend : deckAPIProps = { name: deckName, selected_bset: selectedBset.replace(/[^a-zA-Z0-9]/gim,"-").toLowerCase() ,commander_name: getDataFromLine(deckCommanderName)!.sanitized_name, cards: [] }
lines.slice(1).forEach((line: string) => {
const data = getDataFromLine(line)
if(data != null) {
dataToSend.cards.push(data)
}
});
console.log(dataToSend)
fetch('http://localhost:3000/api/account/decks/create', {
method: "POST",
headers: {Authorization: 'Bearer ' + token},
body: JSON.stringify(dataToSend)
}).then((res) => {
if(res.status == 200) {
res.json().then((apiData) => {
const new_deck: deck = apiData.data
setDecks(oldDecks => [...oldDecks, new_deck])
setDeckName("")
setDeckImporter("")
setSelectedBset("")
setDeckCommanderName("")
})
}
})
}
return (
<div className="flex flex-col items-center mt-24" >
<Card className="max-w-xl w-full">
<CardHeader>
<CardTitle>Importer un deck</CardTitle>
<CardDescription>Depuis moxfield</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<Label className="font-bold">Nom du deck</Label>
<Input value={deckName} onChange={(e) => setDeckName(e.target.value)} placeholder="Nom du deck" />
</div>
<div className="flex flex-col gap-2">
<Label className="font-bold">BSet selectionné</Label>
<Popover open={openSelectBset} onOpenChange={setOpenSelectBset}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={openSelectBset}
className="w-full justify-between"
>
{selectedBset
? bsets.find((bset: bset) => bset.sanitized_name === selectedBset)?.name
: "Selectionnez un Bset..."}
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0">
<Command className="w-full">
<CommandInput placeholder="Search framework..." />
<CommandList>
<CommandEmpty>Pas de BSet trouvé.</CommandEmpty>
<CommandGroup>
{bsets.map((bset) => (
<CommandItem
key={bset.sanitized_name}
value={bset.sanitized_name}
onSelect={(currentValue) => {
setSelectedBset(currentValue === selectedBset ? "" : currentValue)
setOpenSelectBset(false)
}}
>
<div className="flex flex-row gap-2">
{bset.icons.map((icon) => (
<img key={icon} src={icon} className="h-3" loading="lazy" />
))}
</div>
{bset.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
<div className="flex flex-col gap-2">
<Label className="font-bold">Commandant</Label>
<Label className="text-xs">Correspond à la première ligne de l&apos;import Moxfield</Label>
<Input value={deckCommanderName} placeholder="Commandant du Deck" disabled />
</div>
<div className="flex flex-col gap-2">
<Label className="font-bold">Liste des cartes</Label>
<Textarea value={deckImporter} onChange={(e) => updateDeckInput(e.target.value)} placeholder="Collez votre deck ici." className="h-60" />
</div>
<div className="flex flex-row w-full">
<Button onClick={importDeck}>Importer</Button>
</div>
</div>
</CardContent>
</Card>
<div className="max-w-3xl w-full mt-12">
<Table className="w-full">
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{ decks.map((deck) => (
<TableRow key={deck.id}>
<TableCell>{deck.name}</TableCell>
<TableCell className="flex flex-row gap-4 items-center"><a href={"/deck/" + deck.id}>Voir la page</a><Button disabled>Editer</Button><Button onClick={() => {deleteDeck(deck.id)}} variant="destructive">Supprimer</Button></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
}