@shzlx/ui-default 4.58.2

package/components/scratchpad/Toolbar.page.styl

@@ -0,0 +1,53 @@
+.scratchpad__toolbar
+  background: $toolbar-bg
+  padding: rem(8px)
+  font-size: rem($font-size-small)
+  font-weight: normal
+
+.scratchpad__toolbar__item
+  margin-right: rem(5px)
+
+  .select
+    margin: 0
+    height: auto
+    line-height: 1
+
+.scratchpad__toolbar__button
+  padding: rem(5px)
+  font-size: rem($font-size-small)
+  font-weight: normal
+  background: none
+  border: 1px solid transparent
+  color: $toolbar-fore
+  outline: 0
+  transition: .2s linear opacity
+
+  // Hack for Firefox bug #984869
+  &>div
+    display: flex
+    flex-direction: row
+    align-items: center
+
+  &.enabled
+    cursor: pointer
+
+  .icon
+    font-size: rem($font-size-icon)
+    margin-right: 2px
+
+  &.enabled:hover
+    color: $toolbar-fore-hover
+    background: $toolbar-bg-hover
+
+  &.activated
+    color: $toolbar-fore-selected !important
+    background: $toolbar-bg-selected !important
+
+  &.disabled
+    pointer-events: none
+    opacity: $toolbar-disabled-opacity
+
+.scratchpad__toolbar__split
+  width: 1px
+  height: 1rem
+  background: #DDD

package/components/scratchpad/ToolbarComponent.jsx

@@ -0,0 +1,85 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+export default function ToolbarComponent(props) {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  const cn = classNames(className, 'scratchpad__toolbar flex-row flex-cross-center');
+  return (
+    <div {...rest} className={cn}>{children}</div>
+  );
+}
+
+ToolbarComponent.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export function ToolbarButtonComponent(props) {
+  const {
+    activated = false,
+    disabled = false,
+    onClick,
+    className,
+    children,
+    ...rest
+  } = props;
+  const cn = classNames(className, 'scratchpad__toolbar__item scratchpad__toolbar__button', {
+    activated,
+    disabled,
+    enabled: !disabled,
+  });
+  return (
+    <button
+      {...rest}
+      tabIndex="-1"
+      className={cn}
+      onClick={() => !disabled && onClick && onClick()}
+    >
+      <div>{children}</div>
+    </button>
+  );
+}
+
+ToolbarButtonComponent.propTypes = {
+  activated: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export function ToolbarSplitComponent(props) {
+  const {
+    className,
+    ...rest
+  } = props;
+  const cn = classNames(className, 'scratchpad__toolbar__item scratchpad__toolbar__split');
+  return (
+    <div {...rest} className={cn} />
+  );
+}
+
+ToolbarSplitComponent.propTypes = {
+  className: PropTypes.string,
+};
+
+export function ToolbarItemComponent(props) {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  const cn = classNames(className, 'scratchpad__toolbar__item');
+  return (
+    <div {...rest} className={cn}>{children}</div>
+  );
+}
+
+ToolbarItemComponent.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};

package/components/scratchpad/index.tsx

@@ -0,0 +1,132 @@
+import ProblemIcon from '@vscode/codicons/src/icons/file.svg?react';
+import SettingsIcon from '@vscode/codicons/src/icons/settings-gear.svg?react';
+import { Allotment } from 'allotment';
+import $ from 'jquery';
+import _ from 'lodash';
+import type * as monaco from 'monaco-editor';
+import React from 'react';
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import Dom from 'vj/components/react/DomComponent';
+import { ctx, Service } from 'vj/context';
+import ScratchpadEditor from './ScratchpadEditorContainer';
+import ScratchpadPretest from './ScratchpadPretestContainer';
+import ScratchpadRecords from './ScratchpadRecordsContainer';
+import ScratchpadSettings from './ScratchpadSettings';
+import ScratchpadToolbar from './ScratchpadToolbarContainer';
+
+const pages = {
+  problem: {
+    icon: () => <ProblemIcon />,
+    component: () => <Dom childDom={$('.problem-content').get(0)} />,
+  },
+  settings: {
+    icon: () => <SettingsIcon />,
+    component: () => <ScratchpadSettings />,
+  },
+};
+
+let rerenderCallback = null;
+class ScratchpadService extends Service {
+  constructor(public store) {
+    super(ctx, 'scratchpad');
+    this.load = new Promise((resolve) => {
+      this.loadCallback = resolve;
+    });
+  }
+
+  pages = pages;
+  load: Promise<void>;
+  loadCallback: () => void;
+  editor: monaco.editor.IStandaloneCodeEditor;
+  monaco: typeof import('monaco-editor');
+
+  init(editor: monaco.editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) {
+    this.editor = editor;
+    this.monaco = monaco;
+    this.loadCallback();
+  }
+
+  addPage(key, icon, component) {
+    pages[key] = {
+      icon,
+      component,
+    };
+    rerenderCallback?.();
+  }
+}
+declare module 'cordis' {
+  interface Context {
+    scratchpad: ScratchpadService;
+  }
+}
+
+let scratchpad: ScratchpadService;
+
+export default function ScratchpadContainer() {
+  const store = useStore();
+  scratchpad ||= new ScratchpadService(store);
+  const [, updateState] = React.useState<any>();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+  React.useEffect(() => {
+    rerenderCallback = forceUpdate;
+  }, []);
+  const dispatch = useDispatch();
+  const ui = useSelector<any, any>((state) => state.ui, _.isEqual);
+
+  const handleChangeSize = _.debounce(() => {
+    ctx.scratchpad.editor?.layout?.();
+    $('#scratchpad').trigger('vjScratchpadRelayout');
+    forceUpdate();
+  }, 500);
+  const switchToPage = (target) => {
+    dispatch({
+      type: 'SCRATCHPAD_SWITCH_TO_PAGE',
+      payload: target,
+    });
+  };
+
+  return (
+    <Allotment onChange={handleChangeSize}>
+      <Allotment.Pane visible={Object.keys(pages).length > 1} minSize={50} maxSize={50}>
+        <div className="scratchpad__tablist">
+          {Object.keys(pages).map((key) => {
+            const Component = pages[key].icon;
+            return (
+              <div
+                key={key}
+                className={`scratchpad__tabicon-${key}${key === ui.activePage ? ' scratchpad__tab-active' : ''}`}
+                onClick={() => switchToPage(key)}
+              >
+                <Component />
+              </div>
+            );
+          })}
+        </div>
+      </Allotment.Pane>
+      <Allotment.Pane visible={!!ui.activePage}>
+        <div className="scratchpad__problem">
+          {Object.keys(pages).map((key) => {
+            const Component = pages[key].component;
+            return (
+              <div key={key} style={{ display: key === ui.activePage ? 'block' : 'none' }}>
+                <Component />
+              </div>
+            );
+          })}
+        </div>
+      </Allotment.Pane>
+      <Allotment vertical onChange={handleChangeSize}>
+        <div key="editor" className="flex-col splitpane-fill">
+          <ScratchpadToolbar />
+          <ScratchpadEditor />
+        </div>
+        <Allotment.Pane visible={ui.pretest.visible}>
+          <ScratchpadPretest key="pretest" />
+        </Allotment.Pane>
+        <Allotment.Pane visible={ui.records.visible}>
+          <ScratchpadRecords key="records" />
+        </Allotment.Pane>
+      </Allotment>
+    </Allotment>
+  );
+}

package/components/scratchpad/reducers/editor.ts

@@ -0,0 +1,24 @@
+let cacheKey = `${UserContext._id}/${UiContext.pdoc.domainId}/${UiContext.pdoc.docId}`;
+if (UiContext.tdoc?._id) cacheKey += `@${UiContext.tdoc._id}`;
+
+// TODO switch to indexeddb
+export default function reducer(state = {
+  lang: localStorage.getItem(`${cacheKey}#lang`) || UiContext.codeLang,
+  code: localStorage.getItem(cacheKey) || UiContext.codeTemplate,
+}, action: any = {}) {
+  if (action.type === 'SCRATCHPAD_EDITOR_UPDATE_CODE') {
+    localStorage.setItem(cacheKey, action.payload);
+    return {
+      ...state,
+      code: action.payload,
+    };
+  }
+  if (action.type === 'SCRATCHPAD_EDITOR_SET_LANG') {
+    localStorage.setItem(`${cacheKey}#lang`, action.payload);
+    return {
+      ...state,
+      lang: action.payload,
+    };
+  }
+  return state;
+}

package/components/scratchpad/reducers/index.ts

@@ -0,0 +1,17 @@
+import { combineReducers } from 'redux';
+import editor from './editor';
+import pretest from './pretest';
+import records from './records';
+import state from './state';
+import ui from './ui';
+
+const reducer = combineReducers({
+  ui,
+  editor,
+  pretest,
+  records,
+  state,
+});
+
+export default reducer;
+export type RootState = ReturnType<typeof reducer>;

package/components/scratchpad/reducers/pretest.ts

@@ -0,0 +1,34 @@
+import { STATUS_TEXTS } from '@hydrooj/common';
+
+export default function reducer(state = {
+  input: '',
+  output: '',
+  rid: null,
+}, action: any = {}) {
+  if (action.type === 'SCRATCHPAD_PRETEST_DATA_CHANGE') {
+    const { type, value } = action.payload;
+    return {
+      ...state,
+      [type]: value,
+    };
+  }
+  if (action.type === 'SCRATCHPAD_RECORDS_PUSH') {
+    const { rdoc } = action.payload;
+    if (rdoc._id === state.rid) {
+      const output = [`${STATUS_TEXTS[rdoc.status]} ${rdoc.time}ms ${rdoc.memory}KiB`];
+      if (rdoc.compilerTexts.length) output.push(rdoc.compilerTexts.join('\n'));
+      if (rdoc.testCases.length) output.push(rdoc.testCases[0].message || '');
+      return {
+        ...state,
+        output: output.join('\n'),
+      };
+    }
+  }
+  if (action.type === 'SCRATCHPAD_POST_PRETEST_FULFILLED') {
+    return {
+      ...state,
+      rid: action.payload.rid,
+    };
+  }
+  return state;
+}

package/components/scratchpad/reducers/records.ts

@@ -0,0 +1,40 @@
+import _ from 'lodash';
+
+export default function reducer(state = {
+  rows: [],
+  items: {},
+}, action: any = {}) {
+  switch (action.type) {
+    case 'SCRATCHPAD_RECORDS_LOAD_SUBMISSIONS_FULFILLED': {
+      const { rdocs } = action.payload;
+      return {
+        ...state,
+        rows: _.map(rdocs, '_id'),
+        items: _.keyBy(rdocs, '_id'),
+      };
+    }
+    case 'SCRATCHPAD_RECORDS_PUSH': {
+      const { rdoc } = action.payload;
+      const rows = [...state.rows];
+      if (!rows.includes(rdoc._id)) {
+        return {
+          ...state,
+          rows: [rdoc._id, ...state.rows],
+          items: {
+            ...state.items,
+            [rdoc._id]: rdoc,
+          },
+        };
+      }
+      return {
+        ...state,
+        items: {
+          ...state.items,
+          [rdoc._id]: rdoc,
+        },
+      };
+    }
+    default:
+      return state;
+  }
+}

package/components/scratchpad/reducers/state.ts

@@ -0,0 +1,10 @@
+export default function reducer(state = {}, action: any = {}) {
+  if (action.type === 'SCRATCHPAD_STATE_UPDATE') {
+    const { key, value } = action.payload;
+    return {
+      ...state,
+      [key]: value,
+    };
+  }
+  return state;
+}

package/components/scratchpad/reducers/ui.ts

@@ -0,0 +1,152 @@
+import Notification from 'vj/components/notification';
+import { i18n } from 'vj/utils';
+
+export default function reducer(state = {
+  pretest: {
+    visible: UiContext.pdoc.config?.type === 'default'
+      ? localStorage.getItem('scratchpad/pretest') === 'true'
+      : false,
+  },
+  records: {
+    visible: UiContext.canViewRecord && localStorage.getItem('scratchpad/records') === 'true',
+    isLoading: false,
+  },
+  settings: {
+    visible: false,
+    config: JSON.parse(localStorage.getItem('editor.config') || '{}'),
+  },
+  isPosting: false,
+  pretestWaitSec: 0,
+  submitWaitSec: 0,
+  lastTick: 0,
+  activePage: 'problem',
+  pendingCommand: '',
+}, action: any = {}) {
+  switch (action.type) {
+    case 'SCRATCHPAD_UI_SET_VISIBILITY': {
+      const { uiElement, visibility } = action.payload;
+      localStorage.setItem(`scratchpad/${uiElement}`, visibility.toString());
+      return {
+        ...state,
+        [uiElement]: {
+          ...state[uiElement],
+          visible: visibility,
+        },
+      };
+    }
+    case 'SCRATCHPAD_UI_TOGGLE_VISIBILITY': {
+      const { uiElement } = action.payload;
+      localStorage.setItem(`scratchpad/${uiElement}`, (!state[uiElement].visible).toString());
+      return {
+        ...state,
+        [uiElement]: {
+          ...state[uiElement],
+          visible: !state[uiElement].visible,
+        },
+      };
+    }
+    case 'SCRATCHPAD_SETTING_UPDATE': {
+      const { setting, value } = action.payload;
+      const config = {
+        ...state.settings.config,
+        [setting]: value,
+      };
+      localStorage.setItem('editor.config', JSON.stringify(config));
+      return {
+        ...state,
+        settings: {
+          ...state.settings,
+          config,
+        },
+      };
+    }
+    case 'SCRATCHPAD_TRIGGER_EDITOR_COMMAND': {
+      return {
+        ...state,
+        pendingCommand: action.payload.command,
+      };
+    }
+    case 'SCRATCHPAD_POST_PRETEST_PENDING':
+    case 'SCRATCHPAD_POST_SUBMIT_PENDING': {
+      return {
+        ...state,
+        isPosting: true,
+      };
+    }
+    case 'SCRATCHPAD_POST_PRETEST_FULFILLED':
+    case 'SCRATCHPAD_POST_SUBMIT_FULFILLED': {
+      Notification.success(i18n('Submitted.'));
+      return (action.type === 'SCRATCHPAD_POST_SUBMIT_FULFILLED' && UiContext.canViewRecord)
+        ? {
+          ...state,
+          records: {
+            ...state.records,
+            visible: true,
+          },
+          isPosting: false,
+          submitWaitSec: 8,
+        } : {
+          ...state,
+          isPosting: false,
+          pretestWaitSec: 5,
+        };
+    }
+    case 'SCRATCHPAD_POST_PRETEST_REJECTED':
+    case 'SCRATCHPAD_POST_SUBMIT_REJECTED': {
+      Notification.error(action.payload.message);
+      return {
+        ...state,
+        isPosting: false,
+        pretestWaitSec: 3,
+        submitWaitSec: 3,
+      };
+    }
+    case 'SCRATCHPAD_WAITING_TICK': {
+      if (Date.now() - state.lastTick < 950) return state;
+      return {
+        ...state,
+        lastTick: Date.now(),
+        pretestWaitSec: Math.max(state.pretestWaitSec - 1, 0),
+        submitWaitSec: Math.max(state.submitWaitSec - 1, 0),
+      };
+    }
+    case 'SCRATCHPAD_RECORDS_LOAD_SUBMISSIONS_PENDING': {
+      return {
+        ...state,
+        records: {
+          ...state.records,
+          isLoading: true,
+        },
+      };
+    }
+    case 'SCRATCHPAD_RECORDS_LOAD_SUBMISSIONS_REJECTED': {
+      Notification.error(action.payload.message);
+      return {
+        ...state,
+        records: {
+          ...state.records,
+          isLoading: false,
+        },
+      };
+    }
+    case 'SCRATCHPAD_RECORDS_LOAD_SUBMISSIONS_FULFILLED': {
+      return {
+        ...state,
+        records: {
+          ...state.records,
+          isLoading: false,
+        },
+      };
+    }
+    case 'SCRATCHPAD_SWITCH_TO_PAGE': {
+      let newPage = action.payload;
+      if (newPage === state.activePage) newPage = null;
+      return {
+        ...state,
+        activePage: newPage,
+      };
+    }
+    default:
+      return state;
+  }
+}

package/components/scratchpad/scratchpad.page.styl

@@ -0,0 +1,55 @@
+.scratchpad-container
+  position: absolute
+  background: #FFF
+
+#scratchpad
+  position: absolute
+  left: 0
+  top: $nav-item-height
+  width: 100%
+  bottom: 0
+
+.scratchpad__problem
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+  overflow: auto
+
+.scratchpad__toolbar__pretest.enabled:hover .icon
+  color: red
+
+.scratchpad__toolbar__submit.enabled:hover .icon
+  color: green
+
+.scratchpad__records__table
+  &.loading
+    // make a flash by setting opacity, otherwise users
+    // won't think that refreshing is completed!
+    opacity: 0.6
+
+  .col--at
+    width: rem(120px)
+
+  .col--time,
+  .col--memory
+    width: rem(70px)
+
+  .col--detail
+    border-right: 1px solid $table-border-color
+
+  .icol
+    display: inline-block
+
+  .icol--pretest
+    width: rem(60px)
+
+    .flag
+      font-size: rem(12px)
+      color: #FFF
+      padding: rem(2px 3px)
+
+  .icol--stat
+    color: #AAA
+    width: rem(60px)

package/components/scratchpad/var.inc.styl

@@ -0,0 +1,2 @@
+$panel-header-height = 34px
+$tab-color = #fff170

package/components/selectUser.tsx

@@ -0,0 +1,16 @@
+import { prompt } from 'vj/components/dialog';
+import { i18n } from 'vj/utils';
+
+export default async function selectUser() {
+  const res = await prompt(i18n('Select User'), {
+    user: {
+      type: 'user',
+      label: i18n('Username / UID'),
+      required: true,
+      autofocus: true,
+    },
+  });
+  return res?.user;
+}
+
+window.Hydro.components.selectUser = selectUser;