@shzlx/ui-default 4.58.2

package/components/scratchpad/Panel.page.styl

@@ -0,0 +1,18 @@
+@import './var.inc.styl'
+
+.scratchpad__panel-title
+  background: $primary-color
+  line-height: rem($panel-header-height)
+  padding: rem(0 5px)
+  font-size: rem($font-size-small)
+  color: #FFF
+
+.splitpane-fill
+  display: flex
+  position: absolute
+  overflow: hidden
+  left: 0
+  width: 100%
+  top: 0
+  height: 100%
+  user-select: none

package/components/scratchpad/PanelButton.page.styl

@@ -0,0 +1,15 @@
+@import './var.inc.styl'
+
+.scratchpad__panel-button
+  background: none
+  border: 0
+  line-height: rem($panel-header-height)
+  margin: 0
+  color: #FFF
+  padding: rem(0 5px)
+  cursor: pointer
+  font-size: rem($font-size-small)
+  outline: 0
+
+  &:hover
+    color: $tab-color

package/components/scratchpad/PanelButtonComponent.jsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+export default function PanelButtonComponent(props) {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  const cn = classNames(className, 'scratchpad__panel-button');
+  return (
+    <button {...rest} className={cn}>{children}</button>
+  );
+}
+
+PanelButtonComponent.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};

package/components/scratchpad/PanelComponent.jsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function PanelComponent(props) {
+  const {
+    title,
+    className,
+    children,
+    ...rest
+  } = props;
+  const cn = classNames(className, 'flex-col');
+  return (
+    <div {...rest} className={`${cn} splitpane-fill`}>
+      <div className="scratchpad__panel-title">{title}</div>
+      <div className="flex-col flex-fill">{children}</div>
+    </div>
+  );
+}
+
+PanelComponent.propTypes = {
+  title: PropTypes.node,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};

package/components/scratchpad/ScratchpadEditorContainer.tsx

@@ -0,0 +1,137 @@
+import type * as monaco from 'monaco-editor';
+import React from 'react';
+import { connect } from 'react-redux';
+import { load } from 'vj/components/monaco/loader';
+import { ctx } from 'vj/context';
+
+interface ScratchpadOptions {
+  value?: string;
+  language?: string;
+  handleUpdateCode?: (str: string, event: monaco.editor.IModelContentChangedEvent) => void;
+  settings?: any;
+  pendingCommand?: string;
+  commandDone?: () => void;
+}
+
+export default connect((state: any) => ({
+  value: state.editor.code,
+  language: window.LANGS[state.editor.lang]?.monaco,
+  settings: state.ui.settings.config,
+  pendingCommand: state.ui.pendingCommand,
+}), (dispatch) => ({
+  handleUpdateCode: (code: string) => {
+    dispatch({
+      type: 'SCRATCHPAD_EDITOR_UPDATE_CODE',
+      payload: code,
+    });
+  },
+  commandDone: () => {
+    dispatch({
+      type: 'SCRATCHPAD_TRIGGER_EDITOR_COMMAND',
+      payload: { command: '' },
+    });
+  },
+}))(class MonacoEditor extends React.PureComponent<ScratchpadOptions> {
+  disposable: monaco.IDisposable[] = [];
+  __prevent_trigger_change_event = false;
+  model: monaco.editor.ITextModel;
+  editor: monaco.editor.IStandaloneCodeEditor;
+  containerElement: HTMLElement;
+
+  async componentDidMount() {
+    const value = this.props.value || '';
+    const { language } = this.props;
+    const { monaco, registerAction, customOptions } = await load([language]);
+    const uri = monaco.Uri.parse(`hydro:${UiContext.pdoc.pid || UiContext.pdoc.docId}.${language}`);
+    this.model = monaco.editor.getModel(uri) || monaco.editor.createModel(value, language, uri);
+    if (this.containerElement) {
+      const config: monaco.editor.IStandaloneEditorConstructionOptions = {
+        theme: 'vs-light',
+        fontFamily: UserContext.codeFontFamily,
+        ...customOptions,
+        lineNumbers: 'on',
+        glyphMargin: true,
+        lightbulb: { enabled: monaco.editor.ShowLightbulbIconMode.On },
+        model: this.model,
+        fontLigatures: '',
+      };
+      this.editor = monaco.editor.create(this.containerElement, config);
+      registerAction(this.editor, this.model);
+      this.disposable.push(
+        this.editor.onDidChangeModelContent((event) => {
+          if (!this.__prevent_trigger_change_event) {
+            this.props.handleUpdateCode?.(this.editor.getValue({ lineEnding: '\n', preserveBOM: false }), event);
+          }
+        }),
+      );
+      (window as any).editor = this.editor;
+      (window as any).monaco = monaco;
+      ctx.scratchpad.init(this.editor, monaco);
+    }
+  }
+
+  async componentDidUpdate(prevProps) {
+    const {
+      value, language,
+    } = this.props;
+    const { monaco } = await load([language]);
+    const { editor, model } = this;
+    const { LF } = monaco.editor.EndOfLinePreference;
+    if (model && editor && this.props.value != null && this.props.value !== model.getValue(LF, false)) {
+      this.__prevent_trigger_change_event = true;
+      editor.pushUndoStop();
+      model.pushEditOperations(
+        [],
+        [
+          {
+            range: model.getFullModelRange(),
+            text: value!,
+          },
+        ],
+        () => null,
+      );
+      editor.pushUndoStop();
+      this.__prevent_trigger_change_event = false;
+    }
+    if (model && editor && prevProps.language !== language) {
+      const val = model.getValue(LF, false);
+      model.dispose();
+      const uri = monaco.Uri.parse(`hydro:${UiContext.pdoc.pid || UiContext.pdoc.docId}.${language}`);
+      this.model = monaco.editor.getModel(uri) || monaco.editor.createModel(val, language, uri);
+      editor.setModel(this.model);
+    }
+    if (editor && this.props.settings) {
+      editor.updateOptions(this.props.settings);
+    }
+    if (this.props.pendingCommand) {
+      editor.focus();
+      editor.getAction(this.props.pendingCommand)?.run();
+      this.props.commandDone();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.editor) this.editor.dispose();
+    if (this.model) this.model.dispose();
+    this.disposable.map((i) => i.dispose());
+  }
+
+  assignRef = (component) => {
+    this.containerElement = component;
+  };
+
+  render() {
+    return (
+      <div
+        ref={this.assignRef}
+        style={{
+          height: '100%',
+          width: '100%',
+        }}
+        className="ScratchpadMonacoEditor"
+      >
+        <div className="loader-container"><div className="loader"></div></div>
+      </div>
+    );
+  }
+});

package/components/scratchpad/ScratchpadPretestContainer.jsx

@@ -0,0 +1,57 @@
+import { Allotment } from 'allotment';
+import { AnsiUp } from 'ansi_up';
+import React from 'react';
+import { connect } from 'react-redux';
+import Icon from 'vj/components/react/IconComponent';
+import { i18n } from 'vj/utils';
+import DataInput from './DataInputComponent';
+import Panel from './PanelComponent';
+
+const AU = new AnsiUp();
+
+const mapStateToProps = (state) => ({
+  input: state.pretest.input,
+  output: state.pretest.output,
+  rid: state.pretest.rid,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  handleDataChange(type, value) {
+    dispatch({
+      type: 'SCRATCHPAD_PRETEST_DATA_CHANGE',
+      payload: {
+        type,
+        value,
+      },
+    });
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadPretestContainer extends React.PureComponent {
+  render() {
+    return (
+      <Panel
+        title={(
+          <span>
+            <Icon name="edit" />
+            {' '}
+            {i18n('Pretest')}
+          </span>
+        )}
+      >
+        <Allotment>
+          <DataInput
+            title={i18n('Input')}
+            value={this.props.input}
+            onChange={(v) => this.props.handleDataChange('input', v)}
+          />
+          <DataInput
+            title={i18n('Output')}
+            value={AU.ansi_to_html(this.props.output)}
+            html
+          />
+        </Allotment>
+      </Panel>
+    );
+  }
+});

package/components/scratchpad/ScratchpadRecordsContainer.jsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import React from 'react';
+import { connect } from 'react-redux';
+import Icon from 'vj/components/react/IconComponent';
+import { i18n } from 'vj/utils';
+import Panel from './PanelComponent';
+import ScratchpadRecordsRow from './ScratchpadRecordsRowContainer';
+
+const mapStateToProps = (state) => ({
+  rows: state.records.rows,
+  isLoading: state.ui.records.isLoading,
+});
+
+export default connect(mapStateToProps)(class ScratchpadRecordsContainer extends React.PureComponent {
+  render() {
+    const cn = classNames('data-table is--full-row scratchpad__records__table', {
+      loading: this.props.isLoading,
+    });
+    return (
+      <Panel
+        title={(
+          <span>
+            <Icon name="flag" />
+            {' '}
+            {i18n('Records')}
+          </span>
+        )}
+      >
+        <table className={cn}>
+          <colgroup>
+            <col className="col--detail" />
+            <col className="col--memory" />
+            <col className="col--time" />
+            <col className="col--at" />
+          </colgroup>
+          <tbody>
+            {this.props.rows.map((rowId) => (
+              <ScratchpadRecordsRow key={rowId} id={rowId} />
+            ))}
+          </tbody>
+        </table>
+      </Panel>
+    );
+  }
+});

package/components/scratchpad/ScratchpadRecordsRowContainer.jsx

@@ -0,0 +1,83 @@
+import classNames from 'classnames';
+import _ from 'lodash';
+import moment from 'moment';
+import React from 'react';
+import { connect } from 'react-redux';
+import TimeAgo from 'timeago-react';
+import { STATUS_CODES, STATUS_SCRATCHPAD_SHORT_TEXTS, STATUS_SCRATCHPAD_SHOW_DETAIL_FLAGS, STATUS_TEXTS } from 'vj/constant/record';
+import {
+  emulateAnchorClick, i18n, mongoId, substitute,
+} from 'vj/utils';
+
+const shouldShowDetail = (data) => STATUS_SCRATCHPAD_SHOW_DETAIL_FLAGS[data.status] && data.testCases?.length;
+
+const getRecordDetail = (data) => {
+  if (!shouldShowDetail(data)) {
+    return (
+      <span className={`record-status--text ${STATUS_CODES[data.status]}`}>
+        {STATUS_TEXTS[data.status]}
+      </span>
+    );
+  }
+  const stat = _.pick(
+    _.groupBy(data.testCases || [], 'status'),
+    _.keys(STATUS_SCRATCHPAD_SHORT_TEXTS),
+  );
+  return _.map(STATUS_SCRATCHPAD_SHORT_TEXTS, (text, status) => {
+    const count = (stat[status] && stat[status].length) || 0;
+    const cn = classNames('icol icol--stat', {
+      'record-status--text': count > 0,
+      [STATUS_CODES[data.status]]: count > 0,
+    });
+    return (
+      <span key={text} className={cn}>
+        {text}: {count}
+      </span>
+    );
+  });
+};
+
+const mapStateToProps = (state) => ({
+  items: state.records.items,
+});
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+  ...dispatchProps,
+  data: stateProps.items[ownProps.id],
+});
+
+export default connect(mapStateToProps, null, mergeProps)(class ScratchpadRecordsRowContainer extends React.PureComponent {
+  handleRowClick(ev, id) {
+    const url = substitute(
+      decodeURIComponent(UiContext.getRecordDetailUrl),
+      { rid: id },
+    );
+    emulateAnchorClick(ev, url, true);
+  }
+
+  render() {
+    const { data } = this.props;
+    const submitAt = mongoId(data._id).timestamp * 1000;
+    // Is pretest
+    return data.contest?.toString() === '000000000000000000000000' ? null : (
+      <tr onClick={(ev) => this.handleRowClick(ev, data._id)}>
+        <td className={`col--detail record-status--border ${STATUS_CODES[data.status]}`}>
+          <span className={`icon record-status--icon ${STATUS_CODES[data.status]}`}></span>
+          <span className="icol icol--pretest"></span>
+          {getRecordDetail(data)}
+        </td>
+        <td className="col--memory">
+          {shouldShowDetail(data) ? `${Math.ceil(data.memory / 1000)} MB` : '-'}
+        </td>
+        <td className="col--time">
+          {shouldShowDetail(data) ? `${(data.time / 1000).toFixed(1)}s` : '-'}
+        </td>
+        <td className="col--at">
+          <time data-tooltip={moment(submitAt).format('YYYY-MM-DD HH:mm:ss')}>
+            <TimeAgo datetime={submitAt} locale={i18n('timeago_locale')} />
+          </time>
+        </td>
+      </tr>
+    );
+  }
+});

package/components/scratchpad/ScratchpadSettings.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { i18n } from 'vj/utils';
+import { RootState } from './reducers';
+
+export default function ScratchpadSettings() {
+  const config = useSelector((state: RootState) => state.ui.settings.config);
+  const parsed = React.useMemo(() => {
+    const settings = { fontSize: 14, tabSize: 4 };
+    try {
+      Object.assign(settings, config);
+    } catch (e) { }
+    return settings;
+  }, [config]);
+  const dispatch = useDispatch();
+  function dispatcher(setting: string, numeric = false) {
+    return (ev) => {
+      const val = ev?.target?.value || ev;
+      dispatch({ type: 'SCRATCHPAD_SETTING_UPDATE', payload: { setting, value: numeric ? +val : val } });
+    };
+  }
+  function openThemeSelect() {
+    dispatch({ type: 'SCRATCHPAD_TRIGGER_EDITOR_COMMAND', payload: { command: 'hydro.changeEditorTheme' } });
+  }
+  // TODO update style
+  return <div>
+    <div className="row"><div className="medium-6 columns">
+      <label>
+        {i18n('Font size')}:
+        <div className="textbox-container">
+          <input type="number" step="1" value={parsed.fontSize} onChange={dispatcher('fontSize', true)} className="textbox" />
+        </div>
+      </label>
+    </div></div>
+    <div className="row"><div className="medium-6 columns">
+      <label>
+        {i18n('Tab size')}:
+        <div className="textbox-container">
+          <input type="number" step="1" value={parsed.tabSize} onChange={dispatcher('tabSize', true)} className="textbox" />
+        </div>
+      </label>
+    </div></div>
+    <div className="row"><div className="columns">
+      <p>{i18n('Theme')}: </p>
+      <button className="rounded primary button" onClick={openThemeSelect}>{i18n('Open theme select')}</button>
+    </div></div>
+  </div>;
+}

package/components/scratchpad/ScratchpadToolbarContainer.jsx

@@ -0,0 +1,190 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import Icon from 'vj/components/react/IconComponent';
+import { getAvailableLangs, i18n, request } from 'vj/utils';
+import Toolbar, {
+  ToolbarButtonComponent as ToolbarButton,
+  ToolbarItemComponent as ToolbarItem,
+  ToolbarSplitComponent as ToolbarSplit,
+} from './ToolbarComponent';
+
+const mapStateToProps = (state) => ({
+  pretestVisible: state.ui.pretest.visible,
+  recordsVisible: state.ui.records.visible,
+  isPosting: state.ui.isPosting,
+  isRunning: state.pretest.isRunning,
+  pretestWaitSec: state.ui.pretestWaitSec,
+  submitWaitSec: state.ui.submitWaitSec,
+  editorLang: state.editor.lang,
+  editorCode: state.editor.code,
+  pretestInput: state.pretest.input,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  togglePanel(uiElement) {
+    dispatch({
+      type: 'SCRATCHPAD_UI_TOGGLE_VISIBILITY',
+      payload: { uiElement },
+    });
+  },
+  setEditorLanguage(lang) {
+    dispatch({
+      type: 'SCRATCHPAD_EDITOR_SET_LANG',
+      payload: lang,
+    });
+  },
+  postPretest(props) {
+    const req = request.post(UiContext.postSubmitUrl, {
+      lang: props.editorLang,
+      code: props.editorCode,
+      input: [props.pretestInput],
+      pretest: true,
+    });
+    dispatch({
+      type: 'SCRATCHPAD_POST_PRETEST',
+      payload: req,
+    });
+  },
+  postSubmit(props) {
+    const req = request.post(UiContext.postSubmitUrl, {
+      lang: props.editorLang,
+      code: props.editorCode,
+    });
+    dispatch({
+      type: 'SCRATCHPAD_POST_SUBMIT',
+      payload: req,
+    });
+  },
+  loadSubmissions() {
+    dispatch({
+      type: 'SCRATCHPAD_RECORDS_LOAD_SUBMISSIONS',
+      payload: request.get(UiContext.getSubmissionsUrl),
+    });
+  },
+  tick() {
+    dispatch({
+      type: 'SCRATCHPAD_WAITING_TICK',
+    });
+  },
+});
+
+const availableLangs = getAvailableLangs(UiContext.pdoc.config.langs);
+const keys = Object.keys(availableLangs);
+
+export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadToolbarContainer extends React.PureComponent {
+  static contextTypes = {
+    store: PropTypes.object,
+  };
+
+  constructor(props) {
+    super(props);
+    if (!availableLangs[this.props.editorLang]) {
+      // preference not allowed
+      const key = this.props.editorLang ? keys.filter((i) => availableLangs[i].pretest)
+        .find((i) => availableLangs[i].pretest.split('.')[0] === this.props.editorLang.split('.')[0]) : '';
+      this.props.setEditorLanguage(key || keys[0]);
+    }
+  }
+
+  componentDidMount() {
+    if (this.props.recordsVisible) this.props.loadSubmissions();
+  }
+
+  componentDidUpdate() {
+    if (this.props.pretestWaitSec > 0 || this.props.submitWaitSec > 0) {
+      setTimeout(() => this.props.tick(), 1000);
+    }
+  }
+
+  render() {
+    let canUsePretest = UiContext.pdoc.config?.type === 'default';
+    const langInfo = availableLangs[this.props.editorLang];
+    if (UiContext.pdoc.config?.type === 'remote_judge' && langInfo) {
+      if (langInfo.pretest) canUsePretest = true;
+      if (langInfo.validAs && !langInfo.hidden) canUsePretest = true;
+    }
+    if (langInfo?.pretest === false) canUsePretest = false;
+    return (
+      <Toolbar>
+        {canUsePretest && (
+          <ToolbarButton
+            disabled={this.props.isPosting || this.props.isRunning || !!this.props.pretestWaitSec}
+            className="scratchpad__toolbar__pretest"
+            onClick={() => this.props.postPretest(this.props)}
+            data-global-hotkey="f9"
+            data-tooltip={`${i18n('Pretest Your Code')} (F9)`}
+          >
+            <Icon name="debug" />
+            {' '}
+            {i18n('Run Pretest')}
+            {' '}
+            {this.props.pretestWaitSec ? `(${this.props.pretestWaitSec}s)` : '(F9)'}
+          </ToolbarButton>
+        )}
+        <ToolbarButton
+          disabled={this.props.isPosting || !!this.props.submitWaitSec}
+          className="scratchpad__toolbar__submit"
+          onClick={() => this.props.postSubmit(this.props)}
+          data-global-hotkey="f10"
+          data-tooltip={`${i18n('Submit Your Code')} (F10)`}
+        >
+          <Icon name="play" />
+          {' '}
+          {i18n('Submit Solution')}
+          {' '}
+          {this.props.submitWaitSec ? `(${this.props.submitWaitSec}s)` : '(F10)'}
+        </ToolbarButton>
+        <ToolbarButton
+          data-global-hotkey="alt+q"
+          data-tooltip={`${i18n('Quit Scratchpad')} (Alt+Q)`}
+          name="problem-sidebar__quit-scratchpad"
+        >
+          <Icon name="close" />
+          {' '}
+          {i18n('Exit')}
+          {' '}
+          (Alt+Q)
+        </ToolbarButton>
+        <ToolbarItem>
+          <select
+            className="select"
+            disabled={this.props.isPosting}
+            value={this.props.editorLang}
+            onChange={(ev) => this.props.setEditorLanguage(ev.target.value)}
+          >
+            {_.map(availableLangs, (val, key) => (
+              <option value={key} key={key}>{val.display}</option>
+            ))}
+          </select>
+        </ToolbarItem>
+        <ToolbarSplit />
+        {canUsePretest && (
+          <ToolbarButton
+            activated={this.props.pretestVisible}
+            onClick={() => this.props.togglePanel('pretest')}
+            data-global-hotkey="alt+p"
+            data-tooltip={`${i18n('Toggle Pretest Panel')} (Alt+P)`}
+          >
+            <Icon name="edit" />
+            {' '}
+            {i18n('Pretest')}
+          </ToolbarButton>
+        )}
+        {UiContext.canViewRecord && (
+          <ToolbarButton
+            activated={this.props.recordsVisible}
+            onClick={() => this.props.togglePanel('records')}
+            data-global-hotkey="alt+r"
+            data-tooltip={`${i18n('Toggle Records Panel')} (Alt+R)`}
+          >
+            <Icon name="flag" />
+            {' '}
+            {i18n('Records')}
+          </ToolbarButton>
+        )}
+      </Toolbar>
+    );
+  }
+});

package/components/scratchpad/Tab.page.styl

@@ -0,0 +1,24 @@
+.scratchpad__tablist
+  user-select: none
+
+  div
+    display: flex
+    width: 50px
+    height: 50px
+    font-size: 28px
+    flex-direction: row
+    align-items: center
+    justify-content: center
+    margin: rem(8px) 0
+    fill: #666
+    color: #666
+    cursor: pointer
+    &:hover
+      fill: #000
+      color: #000
+
+  div.scratchpad__tab-active
+    border-left: 4px solid #000
+    fill: #000
+    color: #000
+    cursor: default