feat: adapt to server 1.3.0 API change
This commit is contained in:
parent
73f0462d83
commit
e1182a64e4
10
package.json
10
package.json
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "woj-ui",
|
"name": "woj-ui",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.0.0",
|
"version": "1.1.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
@ -12,11 +12,11 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons": "^5.2.6",
|
"@ant-design/icons": "^5.2.6",
|
||||||
"@ant-design/pro-components": "^2.6.48",
|
"@ant-design/pro-components": "^2.6.48",
|
||||||
"@sentry/react": "^7.94.1",
|
"@sentry/react": "^7.98.0",
|
||||||
"@sentry/vite-plugin": "^2.10.3",
|
"@sentry/vite-plugin": "^2.10.3",
|
||||||
"ace-builds": "^1.32.3",
|
"ace-builds": "^1.32.3",
|
||||||
"antd": "^5.13.2",
|
"antd": "^5.13.3",
|
||||||
"axios": "^1.6.5",
|
"axios": "^1.6.7",
|
||||||
"dayjs": "^1.11.10",
|
"dayjs": "^1.11.10",
|
||||||
"github-markdown-css": "^5.5.0",
|
"github-markdown-css": "^5.5.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
@ -32,7 +32,7 @@
|
|||||||
"remark-math": "^5.1.1"
|
"remark-math": "^5.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^20.11.5",
|
"@types/node": "^20.11.9",
|
||||||
"@types/react": "^18.2.48",
|
"@types/react": "^18.2.48",
|
||||||
"@types/react-dom": "^18.2.18",
|
"@types/react-dom": "^18.2.18",
|
||||||
"@types/react-syntax-highlighter": "^15.5.11",
|
"@types/react-syntax-highlighter": "^15.5.11",
|
||||||
|
639
pnpm-lock.yaml
639
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -1,13 +1,20 @@
|
|||||||
import { Meta, send, WithCount } from "./base.ts";
|
import { Meta, send, WithCount } from "./base.ts";
|
||||||
import { UserProfile } from "./user.ts";
|
import { UserProfile } from "./user.ts";
|
||||||
|
|
||||||
|
export interface RuntimeInfo {
|
||||||
|
MemoryLimit: number;
|
||||||
|
NProcLimit: number;
|
||||||
|
TimeLimit: number;
|
||||||
|
}
|
||||||
|
|
||||||
export interface TaskInfo {
|
export interface TaskInfo {
|
||||||
Languages: { Lang: string }[];
|
Languages: {
|
||||||
Runtime: {
|
Lang: string;
|
||||||
MemoryLimit: number;
|
Runtime: {
|
||||||
NProcLimit: number;
|
Compile: RuntimeInfo;
|
||||||
TimeLimit: number;
|
Run: RuntimeInfo;
|
||||||
};
|
};
|
||||||
|
}[];
|
||||||
Tasks: { Id: number; Points: number }[];
|
Tasks: { Id: number; Points: number }[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,17 +1,45 @@
|
|||||||
import React from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { Collapse, CollapseProps, Descriptions, Space, Tag } from "antd";
|
import { Collapse, CollapseProps, Descriptions, Select, Space, Tag } from "antd";
|
||||||
|
|
||||||
import { DetailsResp } from "../api/problem.ts";
|
import { DetailsResp, RuntimeInfo } from "../api/problem.ts";
|
||||||
|
|
||||||
|
const AvailLang = [
|
||||||
|
{ value: "cpp", label: "C++" },
|
||||||
|
{ value: "c", label: "C" },
|
||||||
|
{ value: "python", label: "Python" },
|
||||||
|
{ value: "golang", label: "Go" },
|
||||||
|
];
|
||||||
|
|
||||||
interface ProblemDetailsProps {
|
interface ProblemDetailsProps {
|
||||||
details: DetailsResp;
|
details: DetailsResp;
|
||||||
action?: React.ReactNode;
|
onLanguageSelect?: (lang: string) => void;
|
||||||
|
extra?: CollapseProps["items"];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const EmptyRuntime: RuntimeInfo = {
|
||||||
|
TimeLimit: 0,
|
||||||
|
MemoryLimit: 0,
|
||||||
|
NProcLimit: 0,
|
||||||
|
};
|
||||||
|
|
||||||
export default function ProblemDetails(props: ProblemDetailsProps) {
|
export default function ProblemDetails(props: ProblemDetailsProps) {
|
||||||
const details = props.details;
|
const details = props.details;
|
||||||
|
|
||||||
|
const langOptions = AvailLang.filter((l) => details.context.Languages.some((x) => x.Lang === l.value));
|
||||||
|
|
||||||
|
const [runtime, setRuntime] = useState(EmptyRuntime);
|
||||||
|
const [lang, setLang] = useState(langOptions[0].value);
|
||||||
|
|
||||||
|
const onLanguageSelect = (lang: string) => {
|
||||||
|
setLang(lang);
|
||||||
|
props.onLanguageSelect && props.onLanguageSelect(lang);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setRuntime(details.context.Languages.find((x) => x.Lang === lang)?.Runtime.Run || EmptyRuntime);
|
||||||
|
}, [details.context.Languages, lang]);
|
||||||
|
|
||||||
const problemInfo = (
|
const problemInfo = (
|
||||||
<Descriptions bordered column={1} size="small">
|
<Descriptions bordered column={1} size="small">
|
||||||
<Descriptions.Item label="Title">
|
<Descriptions.Item label="Title">
|
||||||
@ -38,9 +66,18 @@ export default function ProblemDetails(props: ProblemDetailsProps) {
|
|||||||
|
|
||||||
const runtimeLimit = (
|
const runtimeLimit = (
|
||||||
<Descriptions bordered column={1} size="small">
|
<Descriptions bordered column={1} size="small">
|
||||||
<Descriptions.Item label="Time Limit">{details.context.Runtime.TimeLimit} ms</Descriptions.Item>
|
<Descriptions.Item label="Time Limit">{runtime.TimeLimit} ms</Descriptions.Item>
|
||||||
<Descriptions.Item label="Memory Limit">{details.context.Runtime.MemoryLimit} MB</Descriptions.Item>
|
<Descriptions.Item label="Memory Limit">{runtime.MemoryLimit} MB</Descriptions.Item>
|
||||||
<Descriptions.Item label="Process Limit">{details.context.Runtime.NProcLimit}</Descriptions.Item>
|
<Descriptions.Item label="Process Limit">{runtime.NProcLimit}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="Select Language">
|
||||||
|
<Select
|
||||||
|
placeholder="select language"
|
||||||
|
optionFilterProp="children"
|
||||||
|
value={lang}
|
||||||
|
onChange={onLanguageSelect}
|
||||||
|
options={langOptions}
|
||||||
|
/>
|
||||||
|
</Descriptions.Item>
|
||||||
</Descriptions>
|
</Descriptions>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -57,19 +94,8 @@ export default function ProblemDetails(props: ProblemDetailsProps) {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const items: CollapseProps["items"] = [
|
const items: CollapseProps["items"] = [...miscItems, ...(props.extra || [])];
|
||||||
...miscItems,
|
const defaultActiveKey = ["1", "2", ...(props.extra || []).map((x) => x.key?.toString() || "")];
|
||||||
...(props.action
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
key: "3",
|
|
||||||
label: "Action",
|
|
||||||
children: props.action,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: []),
|
|
||||||
];
|
|
||||||
const defaultActiveKey = ["1", "2", ...(props.action ? ["3"] : [])];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { lazy } from "react";
|
import { lazy } from "react";
|
||||||
import { Row, Col, Space, Button } from "antd";
|
import { Row, Col, Space, Button, CollapseProps } from "antd";
|
||||||
import { PlayCircleOutlined, SearchOutlined } from "@ant-design/icons";
|
import { PlayCircleOutlined, SearchOutlined } from "@ant-design/icons";
|
||||||
import { useLoaderData, useNavigate } from "react-router-dom";
|
import { useLoaderData, useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
@ -26,8 +26,16 @@ export default function ProblemPage() {
|
|||||||
</Space>
|
</Space>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const extra: CollapseProps["items"] = [
|
||||||
|
{
|
||||||
|
key: "3",
|
||||||
|
label: "Action",
|
||||||
|
children: actionBtn,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const ProblemStatement = <Markdown markdown={details.problem.statement} />;
|
const ProblemStatement = <Markdown markdown={details.problem.statement} />;
|
||||||
const MiscPanel = <ProblemDetails details={details} action={actionBtn} />;
|
const MiscPanel = <ProblemDetails details={details} extra={extra} />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useLoaderData, useNavigate } from "react-router-dom";
|
import { useLoaderData, useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
import { Button, Col, message, Row, Select, Space } from "antd";
|
import { Button, Col, CollapseProps, message, Row, Space } from "antd";
|
||||||
import { PlayCircleOutlined } from "@ant-design/icons";
|
import { PlayCircleOutlined } from "@ant-design/icons";
|
||||||
|
|
||||||
import Editor from "../components/editor.tsx";
|
import Editor from "../components/editor.tsx";
|
||||||
@ -10,13 +10,6 @@ import { useAuth } from "../components/hook.ts";
|
|||||||
import { DetailsResp } from "../api/problem.ts";
|
import { DetailsResp } from "../api/problem.ts";
|
||||||
import { SubmissionApi } from "../api/submission.ts";
|
import { SubmissionApi } from "../api/submission.ts";
|
||||||
|
|
||||||
const AvailLang = [
|
|
||||||
{ value: "cpp", label: "C++" },
|
|
||||||
{ value: "c", label: "C" },
|
|
||||||
{ value: "python", label: "Python" },
|
|
||||||
{ value: "golang", label: "Go" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const LangToMode: { [lang: string]: string } = {
|
const LangToMode: { [lang: string]: string } = {
|
||||||
cpp: "c_cpp",
|
cpp: "c_cpp",
|
||||||
c: "c_cpp",
|
c: "c_cpp",
|
||||||
@ -30,14 +23,11 @@ export default function SubmitPage() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [msg, msgContextHolder] = message.useMessage();
|
const [msg, msgContextHolder] = message.useMessage();
|
||||||
|
|
||||||
const langOptions = AvailLang.filter((l) => details.context.Languages.some((x) => x.Lang === l.value));
|
const [lang, setLang] = useState("cpp");
|
||||||
|
|
||||||
const [lang, setLang] = useState(langOptions[0].value);
|
|
||||||
const [code, setCode] = useState("");
|
const [code, setCode] = useState("");
|
||||||
const [disallowSubmit, setDisallowSubmit] = useState(false);
|
const [disallowSubmit, setDisallowSubmit] = useState(false);
|
||||||
|
|
||||||
const submitCode = () => {
|
const submitCode = () => {
|
||||||
console.debug(lang, code);
|
|
||||||
SubmissionApi.Create(
|
SubmissionApi.Create(
|
||||||
{
|
{
|
||||||
pid: details.problem.meta.ID,
|
pid: details.problem.meta.ID,
|
||||||
@ -60,27 +50,28 @@ export default function SubmitPage() {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const funcMenu = (
|
const submitBtn = (
|
||||||
<Space wrap>
|
<Space wrap>
|
||||||
<Select
|
|
||||||
placeholder="Select a person"
|
|
||||||
optionFilterProp="children"
|
|
||||||
value={lang}
|
|
||||||
onChange={setLang}
|
|
||||||
options={langOptions}
|
|
||||||
/>
|
|
||||||
<Button icon={<PlayCircleOutlined />} onClick={submitCode} disabled={disallowSubmit}>
|
<Button icon={<PlayCircleOutlined />} onClick={submitCode} disabled={disallowSubmit}>
|
||||||
Submit
|
Submit
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const extra: CollapseProps["items"] = [
|
||||||
|
{
|
||||||
|
key: "3",
|
||||||
|
label: "Action",
|
||||||
|
children: submitBtn,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const codeEditor = Editor({
|
const codeEditor = Editor({
|
||||||
mode: LangToMode[lang],
|
mode: LangToMode[lang],
|
||||||
onChange: setCode,
|
onChange: setCode,
|
||||||
});
|
});
|
||||||
|
|
||||||
const MiscPanel = <ProblemDetails action={funcMenu} details={details} />;
|
const MiscPanel = <ProblemDetails details={details} onLanguageSelect={setLang} extra={extra} />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
Reference in New Issue
Block a user