Compare commits
No commits in common. "a75881c877b3c11e67e51d7b422174e573213bb4" and "9274b3314df185eed27c8eb1b245b61731c723d2" have entirely different histories.
a75881c877
...
9274b3314d
@ -3,5 +3,4 @@ node_modules/
|
||||
/pnpm-lock.yaml
|
||||
/postcss.config.cjs
|
||||
|
||||
src/components/Languages.ts
|
||||
src/components/Verdict.ts
|
||||
src/components/Languages.tsx
|
||||
|
@ -15,6 +15,6 @@ const baseQuery = fetchBaseQuery({
|
||||
|
||||
export const api = createApi({
|
||||
baseQuery: retry(baseQuery, { maxRetries: 2 }),
|
||||
tagTypes: ["User", "Status", "Submission", "ProblemInfo", "TaskInfo", "Status"],
|
||||
tagTypes: ["User", "Status", "Submission", "ProblemInfo", "TaskInfo"],
|
||||
endpoints: () => ({}),
|
||||
});
|
||||
|
@ -1,96 +0,0 @@
|
||||
import type { Meta, WithCount, Wrap } from "./base";
|
||||
import type { SubmissionInfo } from "./submission";
|
||||
import { api } from "./api";
|
||||
|
||||
export enum Verdict {
|
||||
Accepted,
|
||||
WrongAnswer,
|
||||
JuryFailed,
|
||||
PartialCorrect,
|
||||
TimeLimitExceeded,
|
||||
MemoryLimitExceeded,
|
||||
RuntimeError,
|
||||
CompileError,
|
||||
SystemError,
|
||||
}
|
||||
|
||||
export interface TaskResultInfo {
|
||||
id: number;
|
||||
message: string;
|
||||
points: number;
|
||||
runtime: {
|
||||
real_time: number;
|
||||
cpu_time: number;
|
||||
memory: number;
|
||||
};
|
||||
verdict: Verdict;
|
||||
}
|
||||
|
||||
export interface ContextInfo {
|
||||
message: string;
|
||||
compile_message: string;
|
||||
tasks: TaskResultInfo[];
|
||||
}
|
||||
|
||||
export interface StatusInfo {
|
||||
meta: Meta;
|
||||
submission: SubmissionInfo;
|
||||
problem_version_id: number;
|
||||
context: ContextInfo;
|
||||
point: number;
|
||||
is_enabled: boolean;
|
||||
}
|
||||
|
||||
export interface SubmissionWithPoint {
|
||||
submission: SubmissionInfo;
|
||||
point: number;
|
||||
}
|
||||
|
||||
export interface QueryRequest {
|
||||
pid?: number;
|
||||
uid?: number;
|
||||
offset?: number;
|
||||
limit: number;
|
||||
}
|
||||
|
||||
export type QueryResponse = WithCount<SubmissionWithPoint>;
|
||||
|
||||
export interface QueryBySubmissionRequest {
|
||||
sid: number;
|
||||
}
|
||||
|
||||
export interface QueryByVersionRequest {
|
||||
pvid: number;
|
||||
offset?: number;
|
||||
limit: number;
|
||||
}
|
||||
|
||||
export interface QueryByVersionResponse {
|
||||
count: number;
|
||||
status: StatusInfo[];
|
||||
}
|
||||
|
||||
export const statusApi = api.injectEndpoints({
|
||||
endpoints: (builder) => ({
|
||||
list: builder.query<Wrap<QueryResponse>, QueryRequest>({
|
||||
query: (data: QueryRequest) => ({
|
||||
url: "/status/query",
|
||||
method: "POST",
|
||||
body: data,
|
||||
}),
|
||||
providesTags: [{ type: "Status", id: "Search" }],
|
||||
}),
|
||||
status: builder.query<Wrap<StatusInfo>, QueryBySubmissionRequest>({
|
||||
query: (data: QueryBySubmissionRequest) => ({
|
||||
url: "/status/query/submission",
|
||||
method: "POST",
|
||||
body: data,
|
||||
}),
|
||||
// NOTE: we're tracing submission ID here, when rejudge is fired, clear it
|
||||
providesTags: (result) => (result ? [{ type: "Status", id: result.body.submission.meta.ID }] : []),
|
||||
}),
|
||||
// TODO: admin endpoints: detailByVersion
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useListQuery, useStatusQuery } = statusApi;
|
@ -29,7 +29,7 @@ export interface UserProfile {
|
||||
|
||||
export const userApi = api.injectEndpoints({
|
||||
endpoints: (builder) => ({
|
||||
register: builder.mutation<Wrap<string>, UserRequest>({
|
||||
create: builder.mutation<Wrap<string>, UserRequest>({
|
||||
query: (data: UserRequest) => ({
|
||||
url: "/user/create",
|
||||
method: "POST",
|
||||
@ -63,4 +63,4 @@ export const userApi = api.injectEndpoints({
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useRegisterMutation, useLoginMutation, useLogoutMutation, useProfileQuery } = userApi;
|
||||
export const { useCreateMutation, useLoginMutation, useLogoutMutation, useProfileQuery } = userApi;
|
||||
|
@ -1,14 +0,0 @@
|
||||
import { AccordionButton, AccordionIcon, Box } from "@chakra-ui/react";
|
||||
|
||||
export default function TitleItem({ word }: { word: string }) {
|
||||
return (
|
||||
<h2>
|
||||
<AccordionButton>
|
||||
<Box as="span" flex="1" textAlign="left">
|
||||
{word}
|
||||
</Box>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</h2>
|
||||
);
|
||||
}
|
@ -1,34 +0,0 @@
|
||||
import { Code, useColorModeValue } from "@chakra-ui/react";
|
||||
import { Highlight as PrismHighlight, themes } from "prism-react-renderer";
|
||||
|
||||
interface HighlightProps {
|
||||
lang: string;
|
||||
code: string;
|
||||
}
|
||||
|
||||
export default function Highlight(props: HighlightProps) {
|
||||
const codeTheme = useColorModeValue(themes.oneLight, themes.oneDark);
|
||||
|
||||
return (
|
||||
<PrismHighlight language={props.lang} code={props.code} theme={codeTheme}>
|
||||
{({ style, tokens, getLineProps, getTokenProps }) => (
|
||||
<Code
|
||||
padding={2}
|
||||
rounded="md"
|
||||
display="block"
|
||||
whiteSpace="pre"
|
||||
backgroundColor={style.backgroundColor}
|
||||
overflow="auto"
|
||||
>
|
||||
{tokens.map((line, i) => (
|
||||
<div key={i} {...getLineProps({ line })}>
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({ token })} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</Code>
|
||||
)}
|
||||
</PrismHighlight>
|
||||
);
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
import { lazy } from "react";
|
||||
import { Code } from "@chakra-ui/react";
|
||||
import { Code, useColorModeValue } from "@chakra-ui/react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { Highlight, themes } from "prism-react-renderer";
|
||||
|
||||
import remarkGfm from "remark-gfm";
|
||||
import remarkMath from "remark-math";
|
||||
@ -11,13 +11,13 @@ import rehypeMathJaxSvg from "rehype-mathjax";
|
||||
import "github-markdown-css";
|
||||
import "./Markdown.css";
|
||||
|
||||
const Highlight = lazy(() => import("./Highlight"));
|
||||
|
||||
interface MarkdownProps {
|
||||
markdown: string;
|
||||
}
|
||||
|
||||
export default function Markdown(props: MarkdownProps) {
|
||||
const codeTheme = useColorModeValue(themes.oneLight, themes.oneDark);
|
||||
|
||||
const remarkPlugins = [remarkGfm, emoji, remarkMath];
|
||||
const rehypePlugins = [rehypeRaw, rehypeMathJaxSvg];
|
||||
|
||||
@ -34,7 +34,28 @@ export default function Markdown(props: MarkdownProps) {
|
||||
const lang = (match || ["", "text"])[1];
|
||||
const code = String(children).replace(/\n$/, "");
|
||||
|
||||
const codeBlock = <Highlight lang={lang} code={code} />;
|
||||
const codeBlock = (
|
||||
<Highlight language={lang} code={code} theme={codeTheme}>
|
||||
{({ style, tokens, getLineProps, getTokenProps }) => (
|
||||
<Code
|
||||
padding={2}
|
||||
rounded="md"
|
||||
display="block"
|
||||
whiteSpace="pre"
|
||||
backgroundColor={style.backgroundColor}
|
||||
overflow="auto"
|
||||
>
|
||||
{tokens.map((line, i) => (
|
||||
<div key={i} {...getLineProps({ line })}>
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({ token })} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</Code>
|
||||
)}
|
||||
</Highlight>
|
||||
);
|
||||
const codeInline = <Code>{children}</Code>;
|
||||
return !inline && match ? codeBlock : codeInline;
|
||||
},
|
||||
|
@ -1,9 +1,12 @@
|
||||
import type React from "react";
|
||||
import { lazy, useEffect, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionButton,
|
||||
AccordionIcon,
|
||||
AccordionItem,
|
||||
AccordionPanel,
|
||||
Box,
|
||||
Link,
|
||||
Select,
|
||||
Table,
|
||||
@ -16,9 +19,17 @@ import {
|
||||
} from "@chakra-ui/react";
|
||||
import { Link as ReactRouterLink } from "react-router-dom";
|
||||
import type { DetailResponse, RuntimeInfo } from "../app/services/problem";
|
||||
import { LanguageMap } from "./Languages";
|
||||
|
||||
const TitleItem = lazy(() => import("../components/AccordionTitleItem"));
|
||||
const TitleItem = ({ word }: { word: string }) => (
|
||||
<h2>
|
||||
<AccordionButton>
|
||||
<Box as="span" flex="1" textAlign="left">
|
||||
{word}
|
||||
</Box>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</h2>
|
||||
);
|
||||
|
||||
interface ProblemInfoMenuProps {
|
||||
data?: DetailResponse;
|
||||
@ -65,7 +76,7 @@ export default function ProblemInfoMenu(props: ProblemInfoMenuProps) {
|
||||
{props.data?.context.Languages.map((l) => (
|
||||
<WrapItem key={l.Lang}>
|
||||
<Tag variant="outline" size="sm" colorScheme="pink">
|
||||
{LanguageMap[l.Lang].label}
|
||||
{l.Lang}
|
||||
</Tag>
|
||||
</WrapItem>
|
||||
))}
|
||||
@ -111,7 +122,7 @@ export default function ProblemInfoMenu(props: ProblemInfoMenuProps) {
|
||||
<Select size="sm" onChange={(e) => setLang(e.target.value)} value={lang}>
|
||||
{props.data?.context.Languages.map((l) => (
|
||||
<option key={l.Lang} value={l.Lang}>
|
||||
{LanguageMap[l.Lang].label}
|
||||
{l.Lang}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
@ -1,116 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { Badge, Button, Center, Link } from "@chakra-ui/react";
|
||||
import type { ColumnDef, PaginationState } from "@tanstack/react-table";
|
||||
import { Link as ReactRouterLink } from "react-router-dom";
|
||||
|
||||
import type { SubmissionWithPoint } from "../app/services/status";
|
||||
import { useListQuery } from "../app/services/status";
|
||||
import type { UserProfile } from "../app/services/user";
|
||||
import Table from "./Table";
|
||||
import Title from "./Title";
|
||||
import type { SubmissionInfo } from "../app/services/submission";
|
||||
import type { ProblemInfo } from "../app/services/problem";
|
||||
|
||||
const columns: ColumnDef<SubmissionWithPoint>[] = [
|
||||
{
|
||||
id: "id",
|
||||
accessorFn: (i, _) => i.submission.meta.ID,
|
||||
header: (_) => <Title word="ID" />,
|
||||
},
|
||||
{
|
||||
id: "title",
|
||||
accessorFn: (i, _) => i.submission.problem,
|
||||
header: (_) => <Title word="Problem" />,
|
||||
cell: ({ cell }) => {
|
||||
const problem = cell.getValue() as ProblemInfo;
|
||||
return (
|
||||
<Link as={ReactRouterLink} to={`/problem/${problem.meta.ID}`} color="teal.500">
|
||||
{problem.title}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "user",
|
||||
accessorFn: (i, _) => i.submission.user,
|
||||
header: (_) => <Title word="User" />,
|
||||
cell: ({ cell }) => {
|
||||
const user = cell.getValue() as UserProfile;
|
||||
return (
|
||||
<Link as={ReactRouterLink} to={`/profile/${user.meta.ID}`} color="teal.500">
|
||||
{user.nick_name}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "point",
|
||||
accessorKey: "point",
|
||||
header: (_) => <Title word="Point" center={true} />,
|
||||
cell: ({ cell }) => {
|
||||
const point = cell.getValue() as number;
|
||||
const color = point === -1 ? "purple" : point === 100 ? "green" : "red";
|
||||
return (
|
||||
<Center>
|
||||
<Badge colorScheme={color} fontSize="md">
|
||||
{point}
|
||||
</Badge>
|
||||
</Center>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "date",
|
||||
accessorFn: (i, _) => new Date(i.submission.meta.CreatedAt).toLocaleString(),
|
||||
header: (_) => <Title word="Date" />,
|
||||
},
|
||||
{
|
||||
id: "action",
|
||||
accessorKey: "submission",
|
||||
header: (_) => <Title word="Action" center={true} />,
|
||||
cell: ({ cell }) => {
|
||||
const submission = cell.getValue() as SubmissionInfo;
|
||||
return (
|
||||
<Center>
|
||||
<Button variant="outline" colorScheme="teal" size="sm">
|
||||
<Link as={ReactRouterLink} to={`/status/${submission.meta.ID}`}>
|
||||
Detail Status
|
||||
</Link>
|
||||
</Button>
|
||||
</Center>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
interface SubmissionTableProps {
|
||||
pid?: number;
|
||||
uid?: number;
|
||||
}
|
||||
|
||||
export default function SubmissionTable(props: SubmissionTableProps) {
|
||||
const [paging, setPaging] = useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
const { data: info, isFetching } = useListQuery({
|
||||
pid: props.pid || 0,
|
||||
uid: props.uid || 0,
|
||||
offset: paging.pageIndex * paging.pageSize,
|
||||
limit: paging.pageSize,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table<SubmissionWithPoint>
|
||||
header={<Title word="Judge Status" />}
|
||||
columns={columns}
|
||||
data={info?.body.data || []}
|
||||
total={info?.body.count || 0}
|
||||
paging={paging}
|
||||
setPaging={setPaging}
|
||||
isLoading={isFetching}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,10 +0,0 @@
|
||||
import { Center, Text } from "@chakra-ui/react";
|
||||
|
||||
export default function Title(props: { word: string; center?: boolean }) {
|
||||
const b = (
|
||||
<Text as="b" fontSize="lg">
|
||||
{props.word}
|
||||
</Text>
|
||||
);
|
||||
return props.center ? <Center>{b}</Center> : b;
|
||||
}
|
@ -1,17 +0,0 @@
|
||||
import { Verdict } from "../app/services/status";
|
||||
|
||||
/* eslint-disable prettier/prettier */
|
||||
export const VerdictMap: {
|
||||
[key in Verdict]: { color: string; label: string; name: string };
|
||||
} = {
|
||||
[Verdict.Accepted]: { color: "#52C41A", label: "AC", name: "Accepted" },
|
||||
[Verdict.WrongAnswer]: { color: "#E74C3C", label: "WA", name: "Wrong Answer" },
|
||||
[Verdict.JuryFailed]: { color: "#0E1D69", label: "JF", name: "Jury Failed" },
|
||||
[Verdict.PartialCorrect]: { color: "#E67E22", label: "PC", name: "Partial Correct" },
|
||||
[Verdict.TimeLimitExceeded]: { color: "#052242", label: "TLE", name: "Time Limit Exceeded" },
|
||||
[Verdict.MemoryLimitExceeded]: { color: "#052242", label: "MLE", name: "Memory Limit Exceeded" },
|
||||
[Verdict.RuntimeError]: { color: "#9D3DCF", label: "RE", name: "Runtime Error" },
|
||||
[Verdict.CompileError]: { color: "#FADB14", label: "CE", name: "Compile Error" },
|
||||
[Verdict.SystemError]: { color: "#0E1D69", label: "UKE", name: "System Error" },
|
||||
};
|
||||
/* eslint-enable prettier/prettier */
|
@ -43,9 +43,8 @@ export const authSlice = createAppSlice({
|
||||
localStorage.removeItem("token");
|
||||
return { ...initialState, token: null };
|
||||
})
|
||||
.addMatcher(userApi.endpoints.profile.matchRejected, (_state, action) => {
|
||||
.addMatcher(userApi.endpoints.profile.matchRejected, (_state, _action) => {
|
||||
// Profile Failed
|
||||
if (action.meta.arg.originalArgs != 0) return;
|
||||
localStorage.removeItem("token");
|
||||
return { ...initialState, token: null };
|
||||
});
|
||||
|
@ -30,9 +30,9 @@ export default function ProblemDetailPage() {
|
||||
variant="outline"
|
||||
size="sm"
|
||||
leftIcon={<MdSearch />}
|
||||
onClick={() => navigate(`/problem/${id}/submission`)}
|
||||
onClick={() => navigate(`/problem/${id}/status`)}
|
||||
>
|
||||
Submissions
|
||||
Status
|
||||
</Button>
|
||||
</WrapItem>
|
||||
</Wrap>
|
||||
@ -44,7 +44,7 @@ export default function ProblemDetailPage() {
|
||||
<Box w="100%">
|
||||
<Markdown markdown={details?.body.problem.statement || ""} />
|
||||
</Box>
|
||||
<Box maxW="480px">
|
||||
<Box w="480px">
|
||||
<ProblemInfoMenu data={details?.body} action={actionBtn} />
|
||||
</Box>
|
||||
</Stack>
|
||||
|
@ -1,13 +1,28 @@
|
||||
import { useState } from "react";
|
||||
import type { ColumnDef, PaginationState } from "@tanstack/react-table";
|
||||
import { Badge, Button, Input, InputGroup, InputLeftElement, Link, Stack, useColorModeValue } from "@chakra-ui/react";
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Link,
|
||||
Stack,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import { LinkIcon, SearchIcon } from "@chakra-ui/icons";
|
||||
import { Link as ReactRouterLink } from "react-router-dom";
|
||||
|
||||
import type { ProblemInfo } from "../app/services/problem";
|
||||
import { useSearchQuery } from "../app/services/problem";
|
||||
import Table from "../components/Table";
|
||||
import Title from "../components/Title";
|
||||
|
||||
const Title = (props: { word: string }) => (
|
||||
<Text as="b" fontSize="lg">
|
||||
{props.word}{" "}
|
||||
</Text>
|
||||
);
|
||||
|
||||
const columns: ColumnDef<ProblemInfo>[] = [
|
||||
{
|
||||
|
@ -1,52 +0,0 @@
|
||||
import { lazy } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Accordion, AccordionItem, AccordionPanel, Box, Stack, Table, Tbody, Td, Tr } from "@chakra-ui/react";
|
||||
|
||||
import { useProfileQuery, UserRole } from "../app/services/user";
|
||||
|
||||
const SubmissionTable = lazy(() => import("../components/SubmissionTable"));
|
||||
const TitleItem = lazy(() => import("../components/AccordionTitleItem"));
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { id } = useParams();
|
||||
const uid = Number(id) || 0;
|
||||
const { data: profile } = useProfileQuery(uid);
|
||||
const roleName = Object.entries(UserRole).filter(([, v]) => v === profile?.body.role);
|
||||
|
||||
const userInfoMenu = (
|
||||
<Accordion defaultIndex={[0]}>
|
||||
<AccordionItem>
|
||||
<TitleItem word="Profile" />
|
||||
<AccordionPanel>
|
||||
<Table variant="striped" size="sm">
|
||||
<Tbody>
|
||||
<Tr>
|
||||
<Td>Nickname</Td>
|
||||
<Td>{profile?.body.nick_name}</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td>Joined at</Td>
|
||||
<Td>{new Date(profile?.body.meta.CreatedAt || "").toLocaleString()}</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td>Role</Td>
|
||||
<Td>{(roleName.length > 0 && roleName[0][0]) || "N/A"}</Td>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack direction={{ base: "column", md: "row" }}>
|
||||
<Box w="100%">
|
||||
<SubmissionTable uid={uid} />
|
||||
</Box>
|
||||
<Box maxW="480px">{userInfoMenu}</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,150 +0,0 @@
|
||||
import type React from "react";
|
||||
import { lazy } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionPanel,
|
||||
Alert,
|
||||
AlertIcon,
|
||||
Box,
|
||||
Spinner,
|
||||
Stack,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tabs,
|
||||
Text,
|
||||
Tooltip,
|
||||
Wrap,
|
||||
WrapItem,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
import { useStatusQuery } from "../app/services/status";
|
||||
import { useDetailQuery } from "../app/services/problem";
|
||||
import { LanguageMap } from "../components/Languages";
|
||||
import { VerdictMap } from "../components/Verdict";
|
||||
|
||||
const ProblemInfoMenu = lazy(() => import("../components/ProblemInfoMenu"));
|
||||
const TitleItem = lazy(() => import("../components/AccordionTitleItem"));
|
||||
const Highlight = lazy(() => import("../components/Highlight"));
|
||||
|
||||
const gridStyle: React.CSSProperties = {
|
||||
width: "5.3em",
|
||||
height: "5.3em",
|
||||
margin: "0.2em",
|
||||
fontSize: "1.5em",
|
||||
padding: "0.5em",
|
||||
textAlign: "center",
|
||||
textShadow: "1px 1px 2px gray",
|
||||
color: "white",
|
||||
};
|
||||
|
||||
const topLeftStyle: React.CSSProperties = {
|
||||
position: "absolute",
|
||||
fontSize: "0.7em",
|
||||
};
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
fontSize: "1.2em",
|
||||
paddingTop: "0.6em",
|
||||
textAlign: "center",
|
||||
};
|
||||
|
||||
const statusStyle: React.CSSProperties = {
|
||||
fontSize: "0.65em",
|
||||
textAlign: "center",
|
||||
};
|
||||
|
||||
export default function StatusPage() {
|
||||
const { id } = useParams();
|
||||
const sid = Number(id) || 0;
|
||||
const { data: status } = useStatusQuery({ sid: sid });
|
||||
const { data: problem } = useDetailQuery({ pid: status?.body.submission.problem.meta.ID || 0 });
|
||||
|
||||
const showSourceCode = status && status.body.submission.code !== "";
|
||||
const showMessage = status && (status.body.context.message !== "" || status.body.context.compile_message !== "");
|
||||
|
||||
const emptyTab = (
|
||||
<Alert status="warning">
|
||||
<AlertIcon />
|
||||
<Spinner size="sm" mr={2} />
|
||||
<Text as="b" mr={2}>
|
||||
Waiting for Judge...
|
||||
</Text>
|
||||
<Text>Please refresh the page after a few seconds.</Text>
|
||||
</Alert>
|
||||
);
|
||||
|
||||
const statusCardTab = (
|
||||
<Wrap spacing="0.3em">
|
||||
{status?.body.context.tasks.map((task) => (
|
||||
<WrapItem key={task.id}>
|
||||
<Tooltip label={task.message}>
|
||||
<Box style={{ ...gridStyle, background: VerdictMap[task.verdict].color }}>
|
||||
<div style={topLeftStyle}>{`#${task.id}`}</div>
|
||||
<div>
|
||||
<div style={labelStyle}>{VerdictMap[task.verdict].label}</div>
|
||||
<div style={statusStyle}>
|
||||
{`${Math.max(
|
||||
task.runtime.real_time,
|
||||
task.runtime.cpu_time,
|
||||
)}ms/${task.runtime.memory}KB`}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</WrapItem>
|
||||
))}
|
||||
</Wrap>
|
||||
);
|
||||
|
||||
const sourceCodeTab = (
|
||||
<Highlight
|
||||
lang={!showSourceCode ? "text" : LanguageMap[status.body.submission.language].prism}
|
||||
code={status?.body.submission.code || ""}
|
||||
/>
|
||||
);
|
||||
|
||||
const messageTab = (
|
||||
<Accordion defaultIndex={[0, 1]} allowMultiple>
|
||||
<AccordionItem>
|
||||
<TitleItem word="Message" />
|
||||
<AccordionPanel pb={4}>
|
||||
<Highlight lang="text" code={status?.body.context.message || "Not Available"} />
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<TitleItem word="Compile Message" />
|
||||
<AccordionPanel pb={4}>
|
||||
<Highlight lang="text" code={status?.body.context.compile_message || "Not Available"} />
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack direction={{ base: "column", md: "row" }}>
|
||||
<Box w="100%">
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab>Task Info</Tab>
|
||||
<Tab isDisabled={!showSourceCode}>Source Code</Tab>
|
||||
<Tab isDisabled={!showMessage}>Message</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>{status ? statusCardTab : emptyTab}</TabPanel>
|
||||
<TabPanel>{sourceCodeTab}</TabPanel>
|
||||
<TabPanel>{messageTab}</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
<Box maxW="480px">
|
||||
<ProblemInfoMenu data={problem?.body} />
|
||||
</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,27 +0,0 @@
|
||||
import { lazy } from "react";
|
||||
import { Box, Stack } from "@chakra-ui/react";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
import { useDetailQuery } from "../app/services/problem";
|
||||
|
||||
const SubmissionTable = lazy(() => import("../components/SubmissionTable"));
|
||||
const ProblemInfoMenu = lazy(() => import("../components/ProblemInfoMenu"));
|
||||
|
||||
export default function SubmissionListPage() {
|
||||
const { id } = useParams();
|
||||
const pid = Number(id) || 0;
|
||||
const { data: details } = useDetailQuery({ pid: pid });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack direction={{ base: "column", md: "row" }}>
|
||||
<Box w="100%">
|
||||
<SubmissionTable pid={pid} />
|
||||
</Box>
|
||||
<Box maxW="480px">
|
||||
<ProblemInfoMenu data={details?.body} />
|
||||
</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
@ -26,7 +26,7 @@ export default function SubmitPage() {
|
||||
|
||||
useEffect(() => {
|
||||
if (result.isSuccess) {
|
||||
navigate(`/problem/${id}/submission`);
|
||||
navigate(`/problem/${id}/status`);
|
||||
} else if (result.isError) {
|
||||
toast({
|
||||
status: "error",
|
||||
@ -56,7 +56,7 @@ export default function SubmitPage() {
|
||||
<Box w="100%">
|
||||
<Editor mode={LanguageMap[lang].mode} onChange={setCode} />
|
||||
</Box>
|
||||
<Box maxW="480px">
|
||||
<Box w="480px">
|
||||
<ProblemInfoMenu data={details?.body} onLanguageSelect={setLang} action={actionBtn} />
|
||||
</Box>
|
||||
</Stack>
|
||||
|
@ -11,9 +11,6 @@ const LogoutPage = lazy(() => import("./pages/LogoutPage"));
|
||||
const ProblemListPage = lazy(() => import("./pages/ProblemListPage"));
|
||||
const ProblemDetailPage = lazy(() => import("./pages/ProblemDetailPage"));
|
||||
const SubmitPage = lazy(() => import("./pages/SubmitPage"));
|
||||
const SubmissionListPage = lazy(() => import("./pages/SubmissionListPage"));
|
||||
const StatusPage = lazy(() => import("./pages/StatusPage"));
|
||||
const ProfilePage = lazy(() => import("./pages/ProfilePage"));
|
||||
|
||||
export const router: RouteObject[] = [
|
||||
{
|
||||
@ -53,38 +50,6 @@ export const router: RouteObject[] = [
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "problem/:id/submission",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<SubmissionListPage />
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "status/:id",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<StatusPage />
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "profile",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<ProfilePage />
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "profile/:id",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<ProfilePage />
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
Loading…
Reference in New Issue
Block a user