100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
Card,
|
|
CardBody,
|
|
CardFooter,
|
|
CardHeader,
|
|
Heading,
|
|
Radio,
|
|
RadioGroup,
|
|
Stack,
|
|
Text,
|
|
} from "@chakra-ui/react";
|
|
import { useState } from "react";
|
|
|
|
export default function (props: ReportCardProps) {
|
|
const targetMap: { [k: number]: string } = {};
|
|
const [attachmentReady, setAttachmentReady] = useState(
|
|
!props.attachment_loading
|
|
);
|
|
const actionMap: { [k: number]: number } = {};
|
|
|
|
for (let i = 0; i < props.target_ids.length; i++)
|
|
Object.defineProperty(targetMap, props.target_ids[i], {
|
|
value: props.target_usernames[i],
|
|
});
|
|
|
|
async function recheckAttachment() {
|
|
const attachmentCheck = await fetch(`/api/uploads/${props.attachment}`, {
|
|
method: "HEAD",
|
|
});
|
|
|
|
setAttachmentReady(attachmentCheck.ok);
|
|
}
|
|
|
|
return (
|
|
<Card w="100%">
|
|
<CardHeader>
|
|
<Heading size="lg">
|
|
Report for {props.target_usernames.toString()}
|
|
</Heading>
|
|
<Text fontSize="xs">ID(s): {props.target_ids.toString()}</Text>
|
|
</CardHeader>
|
|
<CardBody>
|
|
{attachmentReady ? (
|
|
<video src={`/api/uploads/${props.attachment}`} width="100%" />
|
|
) : (
|
|
<Text>Attachment processing...</Text>
|
|
)}
|
|
</CardBody>
|
|
<CardFooter>
|
|
{props.attachment_loading ? (
|
|
<Button
|
|
colorScheme="blue"
|
|
onClick={async () => await recheckAttachment()}
|
|
>
|
|
Reload Attachment
|
|
</Button>
|
|
) : (
|
|
<Stack direction="column">
|
|
{(function () {
|
|
const radioGroups = [];
|
|
for (let i = 0; i < props.target_ids.length; i++) {
|
|
radioGroups.push(
|
|
<RadioGroup
|
|
name={props.target_ids[i].toString()}
|
|
onChange={(val) => {
|
|
Object.defineProperty(actionMap, props.target_ids[i], {
|
|
value: parseInt(val),
|
|
});
|
|
}}
|
|
>
|
|
<Stack direction="row">
|
|
<Text>{props.target_usernames[i]}</Text>
|
|
<Radio key={0} value="0">
|
|
Ignore
|
|
</Radio>
|
|
<Radio key={1} value="1">
|
|
Hide from Leaderboards
|
|
</Radio>
|
|
<Radio key={2} value="2">
|
|
Ban
|
|
</Radio>
|
|
</Stack>
|
|
</RadioGroup>
|
|
);
|
|
}
|
|
|
|
return radioGroups;
|
|
})()}
|
|
<Box pt="16px">
|
|
<Button colorScheme="blue">Submit</Button>
|
|
</Box>
|
|
</Stack>
|
|
)}
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|