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",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@ -12,11 +12,11 @@
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.2.6",
|
||||
"@ant-design/pro-components": "^2.6.48",
|
||||
"@sentry/react": "^7.94.1",
|
||||
"@sentry/react": "^7.98.0",
|
||||
"@sentry/vite-plugin": "^2.10.3",
|
||||
"ace-builds": "^1.32.3",
|
||||
"antd": "^5.13.2",
|
||||
"axios": "^1.6.5",
|
||||
"antd": "^5.13.3",
|
||||
"axios": "^1.6.7",
|
||||
"dayjs": "^1.11.10",
|
||||
"github-markdown-css": "^5.5.0",
|
||||
"react": "^18.2.0",
|
||||
@ -32,7 +32,7 @@
|
||||
"remark-math": "^5.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.11.5",
|
||||
"@types/node": "^20.11.9",
|
||||
"@types/react": "^18.2.48",
|
||||
"@types/react-dom": "^18.2.18",
|
||||
"@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 { UserProfile } from "./user.ts";
|
||||
|
||||
export interface TaskInfo {
|
||||
Languages: { Lang: string }[];
|
||||
Runtime: {
|
||||
export interface RuntimeInfo {
|
||||
MemoryLimit: number;
|
||||
NProcLimit: number;
|
||||
TimeLimit: number;
|
||||
}
|
||||
|
||||
export interface TaskInfo {
|
||||
Languages: {
|
||||
Lang: string;
|
||||
Runtime: {
|
||||
Compile: RuntimeInfo;
|
||||
Run: RuntimeInfo;
|
||||
};
|
||||
}[];
|
||||
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 { 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 {
|
||||
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) {
|
||||
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 = (
|
||||
<Descriptions bordered column={1} size="small">
|
||||
<Descriptions.Item label="Title">
|
||||
@ -38,9 +66,18 @@ export default function ProblemDetails(props: ProblemDetailsProps) {
|
||||
|
||||
const runtimeLimit = (
|
||||
<Descriptions bordered column={1} size="small">
|
||||
<Descriptions.Item label="Time Limit">{details.context.Runtime.TimeLimit} ms</Descriptions.Item>
|
||||
<Descriptions.Item label="Memory Limit">{details.context.Runtime.MemoryLimit} MB</Descriptions.Item>
|
||||
<Descriptions.Item label="Process Limit">{details.context.Runtime.NProcLimit}</Descriptions.Item>
|
||||
<Descriptions.Item label="Time Limit">{runtime.TimeLimit} ms</Descriptions.Item>
|
||||
<Descriptions.Item label="Memory Limit">{runtime.MemoryLimit} MB</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>
|
||||
);
|
||||
|
||||
@ -57,19 +94,8 @@ export default function ProblemDetails(props: ProblemDetailsProps) {
|
||||
},
|
||||
];
|
||||
|
||||
const items: CollapseProps["items"] = [
|
||||
...miscItems,
|
||||
...(props.action
|
||||
? [
|
||||
{
|
||||
key: "3",
|
||||
label: "Action",
|
||||
children: props.action,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
];
|
||||
const defaultActiveKey = ["1", "2", ...(props.action ? ["3"] : [])];
|
||||
const items: CollapseProps["items"] = [...miscItems, ...(props.extra || [])];
|
||||
const defaultActiveKey = ["1", "2", ...(props.extra || []).map((x) => x.key?.toString() || "")];
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -1,5 +1,5 @@
|
||||
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 { useLoaderData, useNavigate } from "react-router-dom";
|
||||
|
||||
@ -26,8 +26,16 @@ export default function ProblemPage() {
|
||||
</Space>
|
||||
);
|
||||
|
||||
const extra: CollapseProps["items"] = [
|
||||
{
|
||||
key: "3",
|
||||
label: "Action",
|
||||
children: actionBtn,
|
||||
},
|
||||
];
|
||||
|
||||
const ProblemStatement = <Markdown markdown={details.problem.statement} />;
|
||||
const MiscPanel = <ProblemDetails details={details} action={actionBtn} />;
|
||||
const MiscPanel = <ProblemDetails details={details} extra={extra} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { useState } from "react";
|
||||
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 Editor from "../components/editor.tsx";
|
||||
@ -10,13 +10,6 @@ import { useAuth } from "../components/hook.ts";
|
||||
import { DetailsResp } from "../api/problem.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 } = {
|
||||
cpp: "c_cpp",
|
||||
c: "c_cpp",
|
||||
@ -30,14 +23,11 @@ export default function SubmitPage() {
|
||||
const navigate = useNavigate();
|
||||
const [msg, msgContextHolder] = message.useMessage();
|
||||
|
||||
const langOptions = AvailLang.filter((l) => details.context.Languages.some((x) => x.Lang === l.value));
|
||||
|
||||
const [lang, setLang] = useState(langOptions[0].value);
|
||||
const [lang, setLang] = useState("cpp");
|
||||
const [code, setCode] = useState("");
|
||||
const [disallowSubmit, setDisallowSubmit] = useState(false);
|
||||
|
||||
const submitCode = () => {
|
||||
console.debug(lang, code);
|
||||
SubmissionApi.Create(
|
||||
{
|
||||
pid: details.problem.meta.ID,
|
||||
@ -60,27 +50,28 @@ export default function SubmitPage() {
|
||||
);
|
||||
};
|
||||
|
||||
const funcMenu = (
|
||||
const submitBtn = (
|
||||
<Space wrap>
|
||||
<Select
|
||||
placeholder="Select a person"
|
||||
optionFilterProp="children"
|
||||
value={lang}
|
||||
onChange={setLang}
|
||||
options={langOptions}
|
||||
/>
|
||||
<Button icon={<PlayCircleOutlined />} onClick={submitCode} disabled={disallowSubmit}>
|
||||
Submit
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
|
||||
const extra: CollapseProps["items"] = [
|
||||
{
|
||||
key: "3",
|
||||
label: "Action",
|
||||
children: submitBtn,
|
||||
},
|
||||
];
|
||||
|
||||
const codeEditor = Editor({
|
||||
mode: LangToMode[lang],
|
||||
onChange: setCode,
|
||||
});
|
||||
|
||||
const MiscPanel = <ProblemDetails action={funcMenu} details={details} />;
|
||||
const MiscPanel = <ProblemDetails details={details} onLanguageSelect={setLang} extra={extra} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
Reference in New Issue
Block a user