Skip to content
Permalink
056c6b84f3
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
153 lines (133 sloc) 3.99 KB
import {
Button,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Select,
Text,
useToast,
} from "@chakra-ui/react";
export default function (props: { isOpen: boolean; onClose: () => void }) {
function pasteHandler(e: ClipboardEvent) {
if (!props.isOpen) return;
const evidenceElement = document.getElementById(
"evidence",
) as HTMLInputElement;
if (!evidenceElement.files && e.clipboardData?.files) {
evidenceElement.files = e.clipboardData.files;
return;
}
if (!evidenceElement.files || !e.clipboardData?.files.length) return;
if (typeof window["DataTransfer"] === "undefined")
return alert("Your browser is too old to paste images in.");
const dataTransfer = new DataTransfer();
for (const file of evidenceElement.files) dataTransfer.items.add(file);
dataTransfer.items.add(e.clipboardData.files[0]);
evidenceElement.files = dataTransfer.files;
}
addEventListener("paste", pasteHandler);
function reset() {
removeEventListener("paste", pasteHandler);
(
document.getElementById("punishment") as unknown as HTMLSelectElement
).selectedIndex = -1;
(document.getElementById("user") as HTMLInputElement).value = "";
(document.getElementById("evidence") as HTMLInputElement).files = null;
props.onClose();
}
async function submit() {
const form = new FormData();
const { files } = document.getElementById("evidence") as HTMLInputElement;
const punishment = (
document.getElementById("punishment") as unknown as HTMLSelectElement
).item(0)?.value as string;
const { value: user } = document.getElementById("user") as HTMLInputElement;
form.append("user", user);
form.append("punishment", punishment);
if (files) {
for (let i = 0; i < files.length; i++)
form.append(`file${i}`, files[i], files[i].name);
}
const postReq = await fetch("/api/infractions/new", {
body: form,
method: "POST",
});
if (postReq.ok) {
useToast()({
description: "Infraction created",
duration: 5000,
isClosable: true,
status: "success",
title: "Success",
});
props.onClose();
return;
}
useToast()({
description: `Failed to create infraction (${
((await postReq.json()) as { error: string }).error
})`,
duration: 5000,
isClosable: true,
status: "error",
title: "Error",
});
}
return (
<Modal
closeOnEsc={false}
closeOnOverlayClick={false}
isCentered
isOpen={props.isOpen}
onClose={props.onClose}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>New Infraction</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Text>User ID</Text>
<Input id="user" placeholder="1234567890987654321" />
<br />
<br />
<Text>Punishment</Text>
<Select id="punishment" placeholder="Select punishment">
<option value="verbal">Verbal Warning</option>
<option value="warn">Warning</option>
<option value="mute">Mute</option>
<option value="ban_temp">Temporary Ban</option>
<option value="ban_perm">Permanent Ban</option>
<option value="ban_unappealable">Unappealable Permanent Ban</option>
</Select>
<br />
<br />
<Text>Evidence</Text>
<Button
as="label"
// @ts-expect-error
for="evidence"
mr="8px"
>
Select Files
</Button>
<input id="evidence" multiple type="file" />
</ModalBody>
<ModalFooter>
<Button onClick={reset}>Cancel</Button>
<Button
colorScheme="blue"
ml="8px"
onClick={async () => await submit()}
>
Submit
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}