Skip to content
Permalink
05a0d192c3
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
163 lines (157 sloc) 4.77 KB
import {
Box,
Button,
Card,
CardBody,
CardFooter,
CardHeader,
Heading,
HStack,
Radio,
RadioGroup,
Spacer,
Stack,
Text,
} from "@chakra-ui/react";
import { useState } from "react";
export default function (props: ReportCardProps) {
const [attachmentIdx, setAttachmentIdx] = useState(0);
const targetMap: { [k: number]: string } = {};
const [attachmentsReady, setAttachmentReady] = useState(
!props.attachments_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/status", {
body: JSON.stringify(props.attachments),
headers: {
"content-type": "application/json",
},
method: "POST",
});
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>
{attachmentsReady ? (
<div style={{ position: "relative" }}>
<video
src={`/api/uploads/${props.attachments[attachmentIdx]}`}
width="100%"
/>
<HStack
pos="absolute"
top="50%"
transform="translateY(-50%)"
zIndex="1"
>
<Button
borderRadius="50%"
h="16"
visibility={attachmentIdx > 0 ? "visible" : "hidden"}
w="16"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"
/>
</svg>
</Button>
<Spacer />
<Button
borderRadius="50%"
h="16"
visibility={
props.attachments.length > attachmentIdx + 1
? "visible"
: "hidden"
}
w="16"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
/>
</svg>
</Button>
</HStack>
</div>
) : (
<Text>Attachments processing...</Text>
)}
<br />
<Text my="16px">{props.description}</Text>
</CardBody>
<CardFooter>
{props.attachments_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>
);
}