core&ui: add problem_config

Co-authored-by: undefined <i@undefined.moe>

packages/ui-default/components/editor/index.ts

@@ -81,7 +81,7 @@ export default class Editor extends DOMAttachedObject {
       ? monaco.editor.getModel(monaco.Uri.parse(model))
       || monaco.editor.createModel(value, language === 'auto' ? undefined : language, monaco.Uri.parse(model))
       : model;
-    this.model.setValue(value);
+    if (!this.options.model) this.model.setValue(value);
     const cfg: import('../monaco').default.editor.IStandaloneEditorConstructionOptions = {
       theme,
       lineNumbers: 'on',

packages/ui-default/components/menu/menu.page.styl

@@ -42,6 +42,9 @@
     opacity: 0.85
 
 a.menu__link, button.menu__link
+  &.half
+    padding-right: 0
+    width: 50%
   &.disabled
     cursor: default
     opacity: 0.5

packages/ui-default/components/problemconfig/ProblemConfigEditor.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import type { editor } from 'monaco-editor';
+import { connect } from 'react-redux';
+import { load } from 'vj/components/monaco/loader';
+import Editor from 'vj/components/editor';
+import yaml from 'js-yaml';
+
+const mapStateToProps = (state) => ({
+  config: state.config,
+});
+const mapDispatchToProps = (dispatch) => ({
+  handleUpdateCode: (code) => {
+    dispatch({
+      type: 'CONFIG_CODE_UPDATE',
+      payload: code,
+    });
+  },
+});
+
+interface Props {
+  config: object;
+  handleUpdateCode: Function;
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor extends React.PureComponent<Props> {
+  disposable = [];
+  containerElement: HTMLElement;
+  private __preventUpdate = false;
+
+  editor: editor.IStandaloneCodeEditor;
+  model: editor.ITextModel;
+  vjEditor: Editor;
+
+  async componentDidMount() {
+    const { monaco } = await load(['yaml']);
+    const uri = monaco.Uri.parse('hydro://problem/file/config.yaml');
+    this.model = monaco.editor.createModel(yaml.dump(this.props.config), 'yaml', uri);
+    this.vjEditor = Editor.getOrConstruct($(this.containerElement), {
+      language: 'yaml',
+      model: this.model,
+      onChange: (value: string) => {
+        this.__preventUpdate = true;
+        this.props.handleUpdateCode(value);
+        this.__preventUpdate = false;
+      },
+    }) as Editor;
+    this.editor = this.vjEditor.editor;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.__preventUpdate) return;
+    if (yaml.dump(prevProps.config) !== yaml.dump(this.props.config)) {
+      this.model?.pushEditOperations(
+        [],
+        [{
+          range: this.model.getFullModelRange(),
+          text: yaml.dump(this.props.config),
+        }],
+        undefined,
+      );
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.vjEditor) this.vjEditor.destory();
+    if (this.model) this.model.dispose();
+    if (this.editor) this.editor.dispose();
+    this.disposable.map((i) => i.dispose());
+  }
+
+  assignRef = (component) => {
+    this.containerElement = component;
+  };
+
+  render() {
+    return (
+      <div
+        ref={this.assignRef}
+        style={{
+          minHeight: '500px',
+          height: '100%',
+          width: '100%',
+        }}
+        className="ConfigMonacoEditor"
+      >
+      </div>
+    );
+  }
+});

packages/ui-default/components/problemconfig/ProblemConfigForm.tsx

@@ -0,0 +1,455 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import i18n from 'vj/utils/i18n';
+import { isEqual } from 'lodash';
+import { Switch, Tab, Tabs } from '@blueprintjs/core';
+import type { TestCaseConfig } from 'hydrooj/src/interface';
+import type { RootState } from './reducer/index';
+import CustomSelectAutoComplete from '../autocomplete/components/CustomSelectAutoComplete';
+
+const SelectValue = {
+  type: ['default', 'interactive', 'submit_answer', 'objective'],
+  checker_type: ['default', 'lemon', 'syzoj', 'hustoj', 'testlib', 'qduoj'],
+  task_type: ['min', 'max', 'sum'],
+};
+
+const eq = (a: TestCaseConfig[], b: TestCaseConfig[]) => isEqual(a, b);
+
+function FormItem({
+  columns, label, children, helpText = '', disableLabel = false, ...props
+}) {
+  return (
+    <div {...props} className={`${columns && `medium-${columns}`} columns form__item`}>
+      <label htmlFor={`${label}-form`}>
+        {!disableLabel && i18n(label)}
+        {children}
+        {helpText && (<p className="help-text">{i18n(helpText)}</p>)}
+      </label>
+    </div>
+  );
+}
+
+type KeyType<K, T = string | number> = {
+  [Q in keyof K]: K[Q] extends T ? Q : never;
+}[keyof K];
+
+function ManagedInput({ placeholder, formKey }: { placeholder: string, formKey: KeyType<RootState['config']> }) {
+  const value = useSelector((state: RootState) => state.config[formKey]);
+  const dispatch = useDispatch();
+  return (
+    <input
+      placeholder={i18n(placeholder)}
+      value={value || ''}
+      onChange={(ev) => {
+        dispatch({ type: 'CONFIG_FORM_UPDATE', key: formKey, value: ev.currentTarget.value });
+      }}
+      className="textbox"
+    />
+  );
+}
+
+function ManagedSelect({ placeholder, formKey }: { placeholder: string, formKey: KeyType<RootState['config']> }) {
+  const value = useSelector((state: RootState) => state.config[formKey]);
+  const dispatch = useDispatch();
+  return (
+    <select
+      placeholder={i18n(placeholder)}
+      value={value || ''}
+      onChange={(ev) => {
+        dispatch({ type: 'CONFIG_FORM_UPDATE', key: formKey, value: ev.currentTarget.value });
+      }}
+      className="select"
+    >
+      {SelectValue[formKey].map((i) => (<option value={i} key={i}>{i}</option>))}
+    </select>
+  );
+}
+
+function SingleFileSelect({ formKey }: { formKey: KeyType<RootState['config']> }) {
+  const value = useSelector((state: RootState) => state.config[formKey]);
+  const Files = useSelector((state: RootState) => state.testdata);
+  const dispatch = useDispatch();
+  return (
+    <CustomSelectAutoComplete
+      width="100%"
+      data={Files}
+      selectedKeys={[value]}
+      onChange={(val) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: formKey, value: val })}
+    />
+  );
+}
+
+function BasicInfo() {
+  const Type = useSelector((state: RootState) => state.config.type);
+  const checkerType = useSelector((state: RootState) => state.config.checker_type);
+  const dispatch = useDispatch();
+  return (
+    <>
+      <FormItem columns={6} label="Type">
+        <ManagedSelect placeholder="type" formKey="type" />
+      </FormItem>
+      <FormItem columns={6} label="Filename" style={Type === 'interactive' ? { display: 'none' } : {}}>
+        <ManagedInput placeholder="filename" formKey="filename" />
+      </FormItem>
+      <FormItem
+        columns={12}
+        label="CheckerType"
+        disableLabel
+        style={Type !== 'default' ? { display: 'none' } : {}}
+      >
+        <Tabs
+          id="CheckerTypeTabs"
+          selectedTabId={checkerType !== 'strict' ? checkerType : 'default'}
+          onChange={(value) => {
+            dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker_type', value });
+          }}
+          renderActiveTabPanelOnly
+        >
+          <span>{i18n('CheckerType')}</span>
+          <Tabs.Expander />
+          {
+            SelectValue.checker_type.map((i) => (
+              <Tab
+                id={i}
+                title={i}
+                key={i}
+                panel={(
+                  <FormItem columns={12} label="Checker">
+                    {['default', 'strict'].includes(i)
+                      ? (
+                        <Switch
+                          checked={checkerType === 'strict'}
+                          label="Don't ignore space and enter."
+                          onChange={
+                            () => {
+                              dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'checker_type', value: checkerType === 'strict' ? 'default' : 'strict' });
+                            }
+                          }
+                        />
+                      )
+                      : (
+                        <SingleFileSelect formKey="checker" />
+                      )}
+                  </FormItem>
+                )}
+              />
+            ))
+          }
+        </Tabs>
+      </FormItem>
+      <FormItem columns={6} label="Interactor" style={Type !== 'interactive' ? { display: 'none' } : {}}>
+        <SingleFileSelect formKey="interactor" />
+      </FormItem>
+    </>
+  );
+}
+
+function ExtraFilesConfig() {
+  const [showTab, setshowTab] = useState(false);
+  const Files = useSelector((state: RootState) => state.testdata);
+  const userExtraFiles = useSelector((state: RootState) => state.config.user_extra_files);
+  const judgeExtraFiles = useSelector((state: RootState) => state.config.judge_extra_files);
+  const dispatch = useDispatch();
+  return (
+    <FormItem columns={12} label="ExtraFilesTabs" disableLabel>
+      <Switch checked={showTab} label="Extra Files Config" onChange={() => setshowTab(!showTab)} />
+      <div style={!showTab ? { display: 'none' } : {}}>
+        <Tabs id="ExtraFilesTabs">
+          <Tab
+            id="user_extra_files"
+            title="user_extra_files"
+            panel={(
+              <CustomSelectAutoComplete
+                data={Files}
+                selectedKeys={userExtraFiles || []}
+                onChange={(val) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'user_extra_files', value: val.split(',') })}
+                multi
+              />
+            )}
+          />
+          <Tab
+            id="judge_extra_files"
+            title="judge_extra_files"
+            panel={(
+              <CustomSelectAutoComplete
+                data={Files}
+                selectedKeys={judgeExtraFiles || []}
+                onChange={(val) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'judge_extra_files', value: val.split(',') })}
+                multi
+              />
+            )}
+          />
+        </Tabs>
+      </div>
+    </FormItem>
+  );
+}
+
+function CasesTable({ index }) {
+  const [time, setTime] = useState('');
+  const [memory, setMemory] = useState('');
+  const [input, setInput] = useState('');
+  const [output, setOutput] = useState('');
+  const cases = useSelector((state: RootState) => (index === -1 ? state.config.cases : state.config.subtasks[index].cases), eq);
+  console.log(cases);
+  const Files = useSelector((state: RootState) => state.testdata);
+  const dispatch = useDispatch();
+  return (
+    <table className="data-table">
+      <thead>
+        <tr>
+          {
+            index === -1 && (
+              <>
+                <th>
+                  {i18n('Time')}<br />
+                  <input
+                    value={time || ''}
+                    onChange={(ev) => setTime(ev.currentTarget.value)}
+                    className="textbox"
+                  />
+                </th>
+                <th>
+                  {i18n('Memory')}<br />
+                  <input
+                    value={memory || ''}
+                    onChange={(ev) => setMemory(ev.currentTarget.value)}
+                    className="textbox"
+                  />
+                </th>
+              </>
+            )
+          }
+          <th>
+            {i18n('Input')}<br />
+            <CustomSelectAutoComplete
+              width="100%"
+              data={Files}
+              selectedKeys={[input]}
+              onChange={setInput}
+            />
+          </th>
+          <th>
+            {i18n('Output')}<br />
+            <CustomSelectAutoComplete
+              width="100%"
+              data={Files}
+              selectedKeys={[output]}
+              onChange={setOutput}
+            />
+          </th>
+          <th>
+            <span className="icon icon-wrench"></span><br />
+            <a
+              onClick={() => {
+                setTime('');
+                setMemory('');
+                setInput('');
+                setOutput('');
+                dispatch({
+                  type: index === -1 ? 'CONFIG_CASES_UPDATE' : 'CONFIG_SUBTASK_UPDATE',
+                  id: index,
+                  key: 'cases-add',
+                  value: index === -1 ? {
+                    time, memory, input, output,
+                  } : { input, output },
+                });
+              }}
+            ><span className="icon icon-add">{i18n('Add')}</span>
+            </a>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {cases && cases.map((k, v) => (
+          <tr key={JSON.stringify(k)}>
+            {
+              index === -1 && (
+                <>
+                  <td>{k.time}</td>
+                  <td>{k.memory}</td>
+                </>
+              )
+            }
+            <td>{k.input}</td>
+            <td>{k.output}</td>
+            <td>
+              <a
+                onClick={() => dispatch({
+                  type: index === -1 ? 'CONFIG_CASES_UPDATE' : 'CONFIG_SUBTASK_UPDATE', id: index, key: 'cases-delete', value: v,
+                })}
+              ><span className="icon icon-close"></span>
+              </a>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function SubtasksTable({ data, index }) {
+  const subtasks = useSelector((state: RootState) => state.config.subtasks, eq);
+  const dispatch = useDispatch();
+  const dispatcher = (key: string): React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement> => (ev) => {
+    dispatch({
+      type: 'CONFIG_SUBTASK_UPDATE', id: index, key, value: ev.currentTarget.value,
+    });
+  };
+  return (
+    <div key={index}>
+      <span>Subtasks #{index} </span>
+      <a onClick={() => { dispatch({ type: 'CONFIG_SUBTASK_UPDATE', id: index, key: 'add' }); }}><span className="icon icon-add"></span></a>
+      <a
+        style={index === 0 ? { display: 'none' } : {}}
+        onClick={() => { dispatch({ type: 'CONFIG_SUBTASK_UPDATE', id: index, key: 'delete' }); }}
+      ><span className="icon icon-delete"></span>
+      </a>
+      <table className="data-table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Score</th>
+            <th>Type</th>
+            <th>Time</th>
+            <th>Memory</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <input
+                value={data.id}
+                onChange={dispatcher('id')}
+                className="textbox"
+              />
+            </td>
+            <td>
+              <input
+                value={data.score || ''}
+                onChange={dispatcher('score')}
+                className="textbox"
+              />
+            </td>
+            <td>
+              <select
+                value={data.type}
+                onChange={dispatcher('type')}
+                className="select"
+              >
+                <option aria-label="null" value="" style={{ display: 'none' }}></option>
+                {SelectValue.task_type.map((i) => (<option value={i} key={i}>{i}</option>))}
+              </select>
+            </td>
+            <td>
+              <input
+                value={data.time || ''}
+                onChange={dispatcher('time')}
+                className="textbox"
+              />
+            </td>
+            <td>
+              <input
+                value={data.memory || ''}
+                onChange={dispatcher('memory')}
+                className="textbox"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>if</td>
+            <td colSpan={4}>
+              <CustomSelectAutoComplete
+                data={subtasks}
+                selectedKeys={data.if || []}
+                onChange={(val) => dispatch({
+                  type: 'CONFIG_SUBTASK_UPDATE', id: index, key: 'if', value: val.split(','),
+                })}
+                multi
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <CasesTable index={index} />
+    </div>
+  );
+}
+
+function TaskConfig() {
+  const subtasks = useSelector((state: RootState) => state.config.subtasks, eq);
+  const cases = useSelector((state: RootState) => state.config.cases, eq);
+  const dispatch = useDispatch();
+  return (
+    <FormItem columns={12} label="Task Settings">
+      <div className="row">
+        <FormItem columns={4} label="Time">
+          <ManagedInput placeholder="Time" formKey="time" />
+        </FormItem>
+        <FormItem columns={4} label="Memory">
+          <ManagedInput placeholder="Memory" formKey="memory" />
+        </FormItem>
+        <FormItem columns={4} label="Score">
+          <ManagedInput placeholder="Score" formKey="score" />
+        </FormItem>
+        <FormItem columns={12} label="Cases Settings" disableLabel>
+          {cases && <Switch label="Use Subtasks" onChange={() => dispatch({ type: 'CONFIG_SUBTASKS_SWITCH', value: true })} />}
+          {
+            subtasks || cases
+              ? subtasks && <ul>{subtasks.map((k, v) => <SubtasksTable data={k} index={v} key={k.id} />)}</ul>
+              || cases && (<CasesTable index={-1} />)
+              : (
+                <a
+                  onClick={() => dispatch({ type: 'CONFIG_AUTOCASES_UPDATE' })}
+                ><span className="icon icon-settings"> {i18n('Auto Read Tasks')}</span>
+                </a>
+              )
+          }
+        </FormItem>
+      </div>
+    </FormItem>
+  );
+}
+
+function LangConfig() {
+  const [showTab, setshowTab] = useState(false);
+  const langs = useSelector((state: RootState) => state.config.langs) || [];
+  const prefixes = new Set(Object.keys(LANGS).filter((i) => i.includes('.')).map((i) => i.split('.')[0]));
+  const data = Object.keys(LANGS).filter((i) => !prefixes.has(i))
+    .map((i) => ({ name: LANGS[i].display, _id: i }));
+  const dispatch = useDispatch();
+  const ref = React.useRef<any>();
+  const selectedKeys = langs.filter((i) => !prefixes.has(i));
+  React.useEffect(() => {
+    ref.current.setSelectedKeys(selectedKeys);
+  }, [JSON.stringify(selectedKeys)]);
+  return (
+    <FormItem columns={12} label="LangsTabs" disableLabel>
+      <Switch checked={showTab} label="Langs Config" onChange={() => setshowTab(!showTab)} />
+      <FormItem columns={12} label="langs" style={!showTab ? { display: 'none' } : {}}>
+        <CustomSelectAutoComplete
+          ref={ref}
+          data={data}
+          selectedKeys={selectedKeys}
+          onChange={(val) => {
+            const value = val.split(',');
+            value.push(...Array.from(new Set(value.filter((i) => i.includes('.')).map((i) => i.split('.')[0]))));
+            dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'langs', value });
+          }}
+          multi
+        />
+      </FormItem>
+    </FormItem>
+  );
+}
+
+export default function ProblemConfigForm() {
+  return (
+    <div className="row">
+      <BasicInfo />
+      <TaskConfig />
+      <ExtraFilesConfig />
+      <LangConfig />
+    </div>
+  );
+}

packages/ui-default/components/problemconfig/reducer/config.ts

@@ -0,0 +1,73 @@
+import yaml from 'js-yaml';
+import type { ProblemConfigFile } from 'hydrooj/src/interface';
+
+let autocases = { subtasks: [] };
+
+export default function reducer(state = { type: 'default' } as ProblemConfigFile, action): ProblemConfigFile {
+  switch (action.type) {
+  case 'CONFIG_LOAD_FULFILLED': {
+    // TODO set yaml schema
+    autocases = action.payload.autocases;
+    return { ...state, ...yaml.load(action.payload.config) as object };
+  }
+  case 'CONFIG_FORM_UPDATE': {
+    const next = { ...state, [action.key]: action.value };
+    if (!action.value || (typeof action.value === 'object' && !action.value.join(''))) delete next[action.key];
+    if (action.key === 'type' && action.value !== 'default') {
+      delete next.checker_type;
+      delete next.checker;
+    }
+    if (action.key === 'type' && action.value !== 'interactive') delete next.interactor;
+    if (action.key === 'checker_type' && ['default', 'strict'].includes(action.value)) delete next.checker;
+    return next;
+  }
+  case 'CONFIG_CODE_UPDATE': {
+    try {
+      return yaml.load(action.payload);
+    } catch {
+      return state;
+    }
+  }
+  case 'CONFIG_AUTOCASES_UPDATE': {
+    const next = { ...state };
+    if (autocases.subtasks.length === 1) {
+      next.score = autocases.subtasks[0].score;
+      next.cases = [];
+      autocases.subtasks[0].cases.map((i) => next.cases.push({
+        time: autocases.subtasks[0].time, memory: autocases.subtasks[0].memory, input: i.input, output: i.output,
+      }));
+    } else {
+      next.subtasks = autocases.subtasks.map((subtask) => (
+        { ...subtask, ...{ cases: subtask.cases.map((i) => ({ input: i.input, output: i.output })) } }));
+    }
+    return next;
+  }
+  case 'CONFIG_SUBTASKS_SWITCH': {
+    const next = { ...state };
+    next.subtasks = next.cases;
+    if (!next.subtasks.length) next.subtasks.push({ id: 0 });
+    delete next.cases;
+    return next;
+  }
+  case 'CONFIG_CASES_UPDATE': {
+    const next = { ...state };
+    if (action.key === 'cases-add') next.cases.push(action.value);
+    else if (action.key === 'cases-delete') {
+      next.cases = next.cases.filter((k, v) => v !== action.value);
+    }
+    return next;
+  }
+  case 'CONFIG_SUBTASK_UPDATE': {
+    const next = { ...state };
+    if (action.key === 'add') next.subtasks.splice(action.id, 0, { id: 0 });
+    else if (action.key === 'delete') delete next.subtasks[action.key];
+    else if (action.key === 'cases-add') next.subtasks[action.id].cases.push(action.value);
+    else if (action.key === 'cases-delete') {
+      next.subtasks[action.id].cases = next.subtasks[action.id].cases.filter((k, v) => v !== action.value);
+    } else next.subtasks[action.id][action.key] = action.value;
+    return next;
+  }
+  default:
+    return state;
+  }
+}

packages/ui-default/components/problemconfig/reducer/index.ts

@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+import config from './config';
+import testdata from './testdata';
+
+const reducer = combineReducers({
+  config,
+  testdata,
+});
+
+export default reducer;
+export type RootState = ReturnType<typeof reducer>;

packages/ui-default/components/problemconfig/reducer/testdata.ts

@@ -0,0 +1,16 @@
+export default function reducer(state = [], action) {
+  switch (action.type) {
+  case 'CONFIG_LOAD_FULFILLED': {
+    return state.concat(action.payload.testdata);
+  }
+  case 'CONFIG_DELETE_TESTDATA': {
+    return state.filter((i) => i.name !== action.payload.name);
+  }
+  case 'CONFIG_ADD_TESTDATA': {
+    state.push(action.payload);
+    return state;
+  }
+  default:
+    return state;
+  }
+}