@shzlx/ui-default 4.58.2

package/components/problemconfig/tree/SubtaskSettings.tsx

@@ -0,0 +1,180 @@
+import { CustomSelectAutoComplete } from '@hydrooj/components';
+import { parseMemoryMB, parseTimeMS } from '@hydrooj/utils/lib/common';
+import { Button, Group, Modal, Text, TextInput } from '@mantine/core';
+import { isEqual } from 'lodash';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { i18n } from 'vj/utils';
+import { RootState } from '../reducer';
+
+interface SubtaskSettingsProps {
+  subtaskIds: number[];
+  subtaskId: number;
+  time: string;
+  memory: string;
+}
+
+export function SubtaskSettings(props: SubtaskSettingsProps) {
+  const [open, setOpen] = React.useState(false);
+  const [depsOpen, setDepsOpen] = React.useState(false);
+  const subtaskIds = props.subtaskIds.filter((i) => i !== props.subtaskId);
+  const score = useSelector((state: RootState) => state.config.subtasks.find((i) => i.id === props.subtaskId).score);
+  const time = useSelector((state: RootState) => state.config.subtasks.find((i) => i.id === props.subtaskId).time);
+  const memory = useSelector((state: RootState) => state.config.subtasks.find((i) => i.id === props.subtaskId).memory);
+  const deps = useSelector((state: RootState) => state.config.subtasks.find((i) => i.id === props.subtaskId).if || [], isEqual);
+  const type = useSelector((state: RootState) => state.config.subtasks.find((i) => i.id === props.subtaskId).type || 'min');
+
+  const [ctime, setTime] = React.useState(time);
+  const [cmemory, setMemory] = React.useState(memory);
+  const [cscore, setScore] = React.useState(score);
+  const [cdeps, setDeps] = React.useState(deps.join(', '));
+  const [ctype, setType] = React.useState(type);
+
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch({
+      type: 'problemconfig/updateSubtaskConfig',
+      id: props.subtaskId,
+      payload: {
+        type: ctype,
+      },
+    });
+  }, [ctype]);
+
+  function onConfirm() {
+    dispatch({
+      type: 'problemconfig/updateSubtaskConfig',
+      id: props.subtaskId,
+      payload: {
+        time: ctime,
+        memory: cmemory,
+        score: cscore,
+        if: cdeps.split(',').map((i) => i.trim()).filter((i) => +i).map((i) => +i),
+      },
+    });
+    setOpen(false);
+    setDepsOpen(false);
+  }
+
+  return (<>
+    <Modal opened={open} onClose={() => setOpen(false)} title={i18n('Set time and memory limits')}>
+      <Group grow>
+        <TextInput
+          leftSection={<i className="icon icon-stopwatch" />}
+          rightSection={<Text size="sm">ms</Text>}
+          rightSectionWidth={60}
+          onChange={(ev) => setTime(ev.currentTarget.value ? `${ev.currentTarget.value}ms` : '')}
+          placeholder={parseTimeMS(props.time, false).toString() || '1000'}
+          value={ctime ? parseTimeMS(ctime, false).toString() || '' : ''}
+        />
+        <TextInput
+          leftSection={<i className="icon icon-comparison" />}
+          rightSection={<Text size="sm">MB</Text>}
+          rightSectionWidth={60}
+          onChange={(ev) => setMemory(ev.currentTarget.value ? `${ev.currentTarget.value}MB` : '')}
+          placeholder={parseMemoryMB(props.memory, false).toString() || '256'}
+          value={cmemory ? parseMemoryMB(cmemory, false).toString() || '' : ''}
+        />
+        <TextInput
+          leftSection={<i className="icon icon-star" />}
+          onChange={(ev) => setScore(+ev.target.value || 0)}
+          placeholder="Score"
+          type="number"
+          value={cscore.toString()}
+        />
+      </Group>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
+        <Button color="blue" onClick={onConfirm}>{i18n('Save')}</Button>
+      </div>
+    </Modal>
+    <Modal opened={depsOpen} onClose={() => setDepsOpen(false)} title={i18n('Set dependencies')}>
+      <CustomSelectAutoComplete
+        data={subtaskIds.map((i) => ({ _id: i, name: `${i18n('Subtask {0}', i)}` }))}
+        setSelectItems={cdeps.split(',').map((i) => i.trim()).filter((i) => +i).map((i) => +i)}
+        onChange={(items) => setDeps(items)}
+        placeholder="dependencies"
+        multi
+      />
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
+        <Button color="blue" onClick={onConfirm}>{i18n('Save')}</Button>
+      </div>
+    </Modal>
+    <div style={{ paddingLeft: 22, display: 'flex', cursor: 'pointer', gap: 8 }} onClick={() => setOpen(true)}>
+      <Text><i className="icon icon-stopwatch" /></Text>
+      <Text className={time ? '' : 'text-gray'}>{time || props.time || '1s'}&nbsp;&nbsp;</Text>
+      <Text><i className="icon icon-comparison" /></Text>
+      <Text className={memory ? '' : 'text-gray'}>{memory || props.memory || '256m'}&nbsp;&nbsp;</Text>
+      <Text><i className="icon icon-star" /></Text>
+      <Text>{score || 0}</Text>
+    </div>
+    <div style={{ paddingLeft: 22, display: 'flex', alignItems: 'center', cursor: 'pointer', gap: 8 }} onClick={() => setDepsOpen(true)}>
+      <Text><i className="icon icon-diagram-tree" /></Text>
+      <Text>{i18n('Dependencies')}: {deps.length ? deps.join(', ') : i18n('(None)')}</Text>
+    </div>
+    <div style={{ paddingLeft: 22, display: 'flex', alignItems: 'center', gap: 8 }}>
+      <i className="icon icon-asterisk" />
+      <Text>{i18n('Scoring method')}</Text>
+      <span style={{ marginLeft: 'auto' }}>
+        <select className="compact select" value={ctype} onChange={(e) => setType(e.target.value)}>
+          <option value="min">Min</option>
+          <option value="max">Max</option>
+          <option value="sum">Sum</option>
+        </select>
+      </span>
+    </div>
+  </>);
+}
+
+export function GlobalSettings() {
+  const time = useSelector((s: RootState) => s.config?.time);
+  const memory = useSelector((s: RootState) => s.config?.memory);
+  const [open, setOpen] = React.useState(false);
+  const [ctime, setTime] = React.useState(time);
+  const [cmemory, setMemory] = React.useState(memory);
+  React.useEffect(() => {
+    setTime(time);
+  }, [time]);
+  React.useEffect(() => {
+    setMemory(memory);
+  }, [memory]);
+  const dispatch = useDispatch();
+  function onConfirm() {
+    dispatch({
+      type: 'problemconfig/updateGlobalConfig',
+      time: ctime,
+      memory: cmemory,
+    });
+    setOpen(false);
+  }
+  return (<>
+    <Modal opened={open} onClose={() => setOpen(false)} title={i18n('Set time and memory limits')}>
+      <Group grow>
+        <TextInput
+          leftSection={<i className="icon icon-stopwatch" />}
+          rightSection={<Text size="sm">ms</Text>}
+          rightSectionWidth={60}
+          onChange={(ev) => setTime(ev.currentTarget.value ? `${ev.currentTarget.value}ms` : '')}
+          placeholder="1000"
+          value={ctime ? parseTimeMS(ctime, false).toString() || '' : ''}
+        />
+        <TextInput
+          leftSection={<i className="icon icon-comparison" />}
+          rightSection={<Text size="sm">MB</Text>}
+          rightSectionWidth={60}
+          onChange={(ev) => setMemory(ev.currentTarget.value ? `${ev.currentTarget.value}MB` : '')}
+          placeholder="256"
+          value={cmemory ? parseMemoryMB(cmemory, false).toString() || '' : ''}
+        />
+      </Group>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
+        <Button color="blue" onClick={onConfirm}>{i18n('Save')}</Button>
+      </div>
+    </Modal>
+    <div style={{ paddingLeft: 22, display: 'flex', alignItems: 'center', cursor: 'pointer', gap: 8 }} onClick={() => setOpen(true)}>
+      <i className="icon icon-stopwatch" />
+      <Text className={time ? '' : 'text-gray'}>{time || '1s'}</Text>
+      <i className="icon icon-comparison" />
+      <Text className={memory ? '' : 'text-gray'}>{memory || '256MB'}</Text>
+    </div>
+  </>);
+}

package/components/problemconfig/tree/Testcase.tsx

@@ -0,0 +1,98 @@
+import { TestCaseConfig } from 'hydrooj';
+import { Text } from '@mantine/core';
+import { omit } from 'lodash';
+import { useContextMenu } from 'mantine-contextmenu';
+import React from 'react';
+import { useDrag } from 'react-dnd';
+import { useDispatch } from 'react-redux';
+import { i18n } from 'vj/utils';
+
+interface TestcaseNodeProps {
+  c: TestCaseConfig;
+  index: number;
+  time?: string;
+  memory?: string;
+  onClick?: () => void;
+  selected: boolean;
+  subtaskId: number;
+  subtaskIds: number[];
+}
+
+export function TestcaseNode(props: TestcaseNodeProps) {
+  const {
+    c, selected, onClick, subtaskId,
+  } = props;
+  let display = `${c.input} / ${c.output}`;
+  const minlength = Math.min(c.input.length, c.output.length);
+  for (let i = minlength; i >= 0; i--) {
+    const prefix = c.input.slice(0, i);
+    if (c.input.startsWith(prefix) && c.output.startsWith(prefix)) {
+      display = `${prefix}(${c.input.substring(i)}/${c.output.substring(i)})`;
+      break;
+    }
+  }
+  return (
+    <div
+      onClick={onClick}
+      data-subtaskid={subtaskId}
+      data-index={c.input}
+      data-selected={selected}
+      style={{
+        paddingLeft: 22,
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+        background: selected ? 'var(--mantine-color-blue-light, #ebf3ff)' : 'transparent',
+        borderRadius: 4,
+        fontFamily: 'var(--mantine-font-family-monospace)',
+      }}
+    >
+      <Text ml="xs"><i className="icon icon-file" /> {display}</Text>
+    </div>
+  );
+}
+
+interface TestcaseGroupProps extends Omit<TestcaseNodeProps, 'c'> {
+  cases: TestCaseConfig[];
+  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+
+export function TestcaseGroup(props: TestcaseGroupProps) {
+  const {
+    cases, subtaskId, subtaskIds, onClick, index,
+  } = props;
+  const dispatch = useDispatch();
+  const { showContextMenu } = useContextMenu();
+  const moveTargets = subtaskIds.filter((i) => i !== subtaskId);
+  const [collected, drag] = useDrag(() => ({
+    type: 'cases',
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    canDrag: props.selected,
+    item: { cases, subtaskId },
+  }), [JSON.stringify(cases), subtaskId]);
+  return <div
+    ref={drag as any}
+    onClick={onClick}
+    onMouseDown={props.onMouseDown}
+    onContextMenu={showContextMenu(
+      moveTargets.length
+        ? moveTargets.map((id) => ({
+          key: `move-${id}`,
+          icon: <i className="icon icon-send" />,
+          title: `${i18n('Move to')} ${i18n('Subtask {0}', id)}`,
+          onClick: () => dispatch({
+            type: 'problemconfig/moveTestcases',
+            payload: { target: id, source: subtaskId, cases },
+          }),
+        }))
+        : [{ key: 'no-target', title: i18n('No target available'), onClick: () => { }, disabled: true }],
+    )}
+    style={{ opacity: collected.isDragging ? 0.5 : 1 }}
+  >
+    {cases.map((c, id) => (
+      <TestcaseNode c={c} key={`${c.input}@${index + id}`} {...omit(props, 'onClick')} index={index + id} />
+    ))}
+  </div>;
+}

package/components/profile/backgrounds/gen_thumbnails.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+for f in *.jpg
+do
+  echo "$f..."
+	convert "$f" -strip -interlace Plane -quality 92 -resize 200x124^ -gravity center -extent 200x124 "thumbnail/$f"
+done

package/components/profile/profile.page.styl

@@ -0,0 +1,23 @@
+.user-profile-avatar
+  border-radius: 50% !important
+
+.user-profile-badge
+  display: inline-block !important
+  font-size: rem(12px) !important
+  padding: rem(3px 4px) !important
+  line-height: 1 !important
+
+  &:hover
+    text-decoration: none !important
+
+for n in (1..21)
+  .user-profile-bg--{n}
+    background-image: url('backgrounds/' + n + '.jpg')
+
+  .user-profile-bg--thumbnail-{n}
+    background-image: url('backgrounds/thumbnail/' + n + '.jpg')
+
+for key, _ in $badge-bg-color
+  .badge--{key}
+    background-color: $badge-bg-color[key] !important
+    color: $badge-text-color[key] !important

package/components/react/DomComponent.tsx

@@ -0,0 +1,14 @@
+import $ from 'jquery';
+import { omit } from 'lodash';
+import React from 'react';
+
+export default function DomComponent(props: React.HTMLAttributes<HTMLDivElement> & { childDom: HTMLElement }) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    ref.current.appendChild(props.childDom);
+    return () => {
+      $(ref.current).empty();
+    };
+  }, []);
+  return <div {...omit(props, 'childDom')} ref={ref}></div>;
+}

package/components/react/IconComponent.tsx

@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function IconComponent(props: { name: string, className?: string } & React.HTMLAttributes<HTMLSpanElement>) {
+  const {
+    name,
+    className,
+    ...rest
+  } = props;
+  const cn = classNames(className, `icon icon-${name}`);
+  return (
+    <span {...rest} className={cn} />
+  );
+}
+
+IconComponent.propTypes = {
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};

package/components/record/record.page.styl

@@ -0,0 +1,26 @@
+.record-status--text
+  for key, value in $record-status-color
+    &.{key}
+      color: value !important
+
+.record-status--icon
+  display: inline-block
+  width: 1.15em
+  for key, value in $record-status-icon
+    &.{key}:before
+      content: value
+      color: $record-status-color[key]
+
+.record-status--border
+  border-left: rem(3px) solid transparent
+  for key, value in $record-status-color
+    &.{key}
+      border-left: rem(3px) solid lighten(value, 10%)
+
+.record-status--background
+  color: #FFF
+
+  for key, value in $record-status-color
+    &.{key}
+      background: value
+

package/components/rotator/index.js

@@ -0,0 +1,75 @@
+import $ from 'jquery';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import { delay } from 'vj/utils';
+
+const ANIMATION_DURATION = 4000;
+
+const POS_ABOVE = -1;
+const POS_ORIGINAL = 0;
+const POS_BELOW = 1;
+
+const POS_CLASSNAME = {
+  [POS_ABOVE]: 'pos--above',
+  [POS_ORIGINAL]: '',
+  [POS_BELOW]: 'pos--below',
+};
+
+export default class Rotator extends DOMAttachedObject {
+  static DOMAttachKey = 'vjRotatorInstance';
+
+  getItemClass(pos) {
+    return `rotator__item ${POS_CLASSNAME[pos]}`;
+  }
+
+  constructor($dom) {
+    super($dom);
+    $dom.addClass('rotator');
+    this.value = $dom.text();
+    this.$item = this
+      .createItem(this.value, POS_ORIGINAL)
+      .appendTo($dom.empty());
+  }
+
+  createItem(value, initialPosition) {
+    const $el = $('<div>')
+      .text(value)
+      .attr('class', this.getItemClass(initialPosition));
+    return $el;
+  }
+
+  async animateOutItem(toPosition) {
+    const { $item } = this;
+    $item.attr('class', this.getItemClass(toPosition));
+    await delay(ANIMATION_DURATION);
+    $item.remove();
+  }
+
+  async animateInItem() {
+    const { $item } = this;
+    $item.height(); // force reflow
+    $item.attr('class', this.getItemClass(POS_ORIGINAL));
+    await delay(ANIMATION_DURATION);
+  }
+
+  setValue(value) {
+    if (value === this.value) {
+      return;
+    }
+    let fromPosition;
+    if (Number.parseFloat(value) > Number.parseFloat(this.value)) {
+      fromPosition = POS_BELOW;
+    } else {
+      fromPosition = POS_ABOVE;
+    }
+    this.animateOutItem(-fromPosition);
+    this.value = value;
+    this.$item = this
+      .createItem(value, fromPosition)
+      .appendTo(this.$dom);
+    this.animateInItem();
+  }
+
+  getValue() {
+    return this.value;
+  }
+}

package/components/rotator/rotator.page.styl

@@ -0,0 +1,20 @@
+.rotator
+  position: relative
+  height: 1em
+
+.rotator__item
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+  transition: transform .2s, opacity .2s
+  transition-timing-function: ease-out-cubic
+
+  &.pos--above
+    transform: translateY(-100%)
+    opacity: 0
+
+  &.pos--below
+    transform: translateY(100%)
+    opacity: 0

package/components/scratchpad/DataInput.page.styl

@@ -0,0 +1,17 @@
+.scratchpad__data-input
+  border: 0
+  border-left: 3px solid #E0E0E0
+  background: #F8F8F8
+  padding: rem(8px 4px)
+  font-family: $code-font-family
+  font-size: rem($font-size-secondary)
+  outline: 0
+  resize: none
+  color: #666
+  height: 100%
+  width: 100%
+  transition: background-color .2s linear, border-color .2s linear
+
+  &:focus
+    background: #FFF
+    border-color: lighten($primary-color, 70%)

package/components/scratchpad/DataInputComponent.jsx

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+
+export default function DataInputComponent(props) {
+  const {
+    html,
+    title,
+    value,
+    onChange,
+    className,
+    ...rest
+  } = props;
+  return (
+    <div {...rest} className={className} style={{ height: '100%', width: '100%' }}>
+      {html ? (
+        <div
+          className="scratchpad__data-input"
+          style={{ overflowY: 'scroll' }}
+          wrap="off"
+          spellCheck="false"
+        >
+          <pre dangerouslySetInnerHTML={{ __html: value }} contentEditable />
+        </div>
+      ) : (
+        <textarea
+          className="scratchpad__data-input"
+          wrap="off"
+          spellCheck="false"
+          value={value}
+          onChange={(ev) => {
+            ev.stopPropagation();
+            onChange(ev.target.value);
+          }}
+          placeholder={title}
+        />
+      )}
+    </div>
+  );
+}
+
+DataInputComponent.propTypes = {
+  title: PropTypes.node,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+};

package/components/scratchpad/Editor.page.styl

@@ -0,0 +1,13 @@
+.ScratchpadMonacoEditor
+  flex: 1
+  position: relative
+
+.cm-s-vjcm
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+  font-family: $code-font-family
+  font-size: rem($font-size-secondary)
+  line-height: 1.2