@shzlx/ui-default 4.58.2

package/components/omnisearch/omnibar.page.styl

@@ -0,0 +1,138 @@
+.omnibar {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(3px);
+    z-index: 999;
+    transition: 0.2s;
+}
+.omnibar-main {
+    height: min(600px, 100% - 20px);
+    width: min(750px, 60%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    >div:first-child {
+        transition: 0.2s;
+        margin-bottom: 10px;
+        input {
+            background-color: #fff;
+            border-radius: 5px;
+            border: 2px solid #aaa;
+            padding-left: 42px;
+            height: 48px;
+            width: 100%;
+            font-size: 18px;
+            outline: 0;
+            box-sizing: border-box;
+        }
+        span {
+            height: 48px;
+            width: 48px;
+            position: absolute;
+            display: grid;
+            scale: 1.5;
+            place-items: center;
+            top: 0px;
+            left: 0px;
+        }
+    }
+    >div:last-child {
+        flex: 1;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        overflow-x: hidden;
+        overflow-y: auto;
+        &::-webkit-scrollbar { width: 0 !important; }
+    }
+}
+.omnibar-toggle {
+    z-index: 99;
+    background: white;
+    display: grid;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    right: 20px;
+    bottom: 30px;
+    transition: 0.2s;
+    border-radius: 5px;
+    &:hover {
+        background: #ccc;
+    }
+    span {
+        scale: 1.5;
+    }
+}
+#omnibar-content {
+    overscroll-behavior: none;
+}
+.omnibar-content-title {
+    text-align: left;
+    margin-bottom: 10px;
+    width: 100%;
+    font-size: 18px;
+    font-weight: bold;
+}
+.omnibar-content-section {
+    background: white;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    padding: 10px;
+    line-height: 1;
+    margin-bottom: 10px;
+    border: 2px solid #888;
+    box-sizing: border-box;
+    width: 100%;
+    text-decoration: none !important;
+    &:hover {
+        background: #eee;
+    }
+    >div {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+    }
+}
+
+.omnibar-user img {
+    height: 36px;
+    width: 36px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+.omnibar-user-info {
+    >span {
+        font-size: 14px;
+        margin-bottom: 3px;
+        display: inline-block;
+    }
+    >div {
+        display: flex;
+        flex-direction: row;
+    }
+}
+
+.omnibar-problem a {
+    margin: 2px 0px 3px 0px;
+}
+.omnibar-problem .icon {
+    margin-right: 3px;
+    &:not(:first-child) {
+        margin-left: 10px;
+    }
+}
+@media print {
+    .omnibar, .omnibar-toggle {
+        display: none;
+    }
+}

package/components/pager/pager.page.styl

@@ -0,0 +1,57 @@
+.pager
+  text-align: center
+  font-size: rem($font-size-small)
+
+  &:empty
+    display: none
+  
+  &.pager-bottom
+    margin-bottom: rem(10px)
+    border-top: 2px solid $pager-border-color
+
+    .pager__item
+      border-top: 2px solid $pager-border-color
+
+  &.pager-top
+    margin-top: rem(10px)
+    border-bottom: 2px solid $pager-border-color
+
+    .pager__item
+      border-bottom: 2px solid $pager-border-color
+
+  li
+    margin: 0
+    display: inline-block
+    margin-top: -2px
+
+.pager__item
+  display: inline-block
+  padding: rem(10px)
+  text-decoration: none
+  border: 0
+  transition: border-top .2s linear, color .2s linear
+  color: #a7a7a7
+
+  &.link
+    &, .typo &
+      color: #a7a7a7
+
+    &:hover
+      border-color: $primary-color
+      text-decoration: none
+      &, .typo &
+        color: #666
+
+  &.current
+    color: $secondary-color !important
+    border-color: $secondary-color !important
+
++mobile()
+  .pager__item
+    &.ellipsis,
+    &.first,
+    &.previous,
+    &.next,
+    &.last
+      display: none
+

package/components/preview/preview.page.ts

@@ -0,0 +1,187 @@
+import Clipboard from 'clipboard';
+import $ from 'jquery';
+import { nanoid } from 'nanoid';
+import { ActionDialog, InfoDialog } from 'vj/components/dialog/index';
+import Notification from 'vj/components/notification';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n, request, tpl } from 'vj/utils';
+import uploadFiles from '../upload';
+
+async function startEdit(filename, value, fileCategory = 'file') {
+  const { default: Editor } = await import('vj/components/editor/index');
+  const promise = new ActionDialog({
+    $body: tpl`
+      <div class="typo" style="width: 100%; height: 100%">
+        <textarea name="fileContent" style="width: 100%; height: 100%"></textarea>
+      </div>`,
+    width: `${window.innerWidth - 200}px`,
+    height: `${window.innerHeight - 100}px`,
+    cancelByEsc: false,
+  }).open();
+  const languages = [
+    ['yaml', ['yaml', 'yml']],
+    ['cpp', ['c', 'cc', 'cpp', 'h', 'hpp']],
+    ['json', ['json']],
+    ['plain', ['in', 'out', 'ans']],
+  ];
+  const language = languages.filter((i) => i[1].includes(filename.split('.').pop()))[0]?.[0] || 'auto';
+  const editor = new Editor($('[name="fileContent"]'), {
+    value,
+    autoResize: false,
+    autoLayout: false,
+    language: (language as string),
+    model: `hydro://problem/${fileCategory}/${filename}`,
+  });
+  const action = await promise;
+  value = (editor.value() as string).replace(/\r\n/g, '\n');
+  editor.destroy();
+  if (action !== 'ok') return null;
+  return value;
+}
+
+const dialogAction = (id) => [
+  tpl`<button class="rounded button" data-action="copy" id="copy-${id}">${i18n('Copy Link')}</button>`,
+  tpl`<button class="rounded button" data-action="download">${i18n('Download')}</button>`,
+  tpl`<button class="primary rounded button" data-action="ok">${i18n('Ok')}</button>`,
+];
+
+function bindCopyLink(id, src: string) {
+  // Usually brackets are allowed in URLs, but in markdown there's need to escape them
+  src = src.replace(/\(/g, '%28').replace(/\)/g, '%29');
+  const url = !['file', 'files'].some((i) => window.location.href.endsWith(i))
+    || ['homework', 'training'].some((i) => window.location.href.match(`${i}/.*/file`))
+    ? `file://${src.substring(src.lastIndexOf('/') + 1)}` : src;
+  const clip = new Clipboard(`#copy-${id}`, { text: () => url });
+  clip.on('success', () => Notification.success(i18n(`${url.startsWith('file://') ? 'Reference' : 'Download'} link copied to clipboard!`)));
+  clip.on('error', () => Notification.error(i18n('Copy failed :(')));
+}
+
+async function previewVideo(link) {
+  const id = nanoid();
+  const dialog = new InfoDialog({
+    $body: tpl`
+    <div class="typo"><video width="100%" controls>
+      <source src="${link}" type="${link.endsWith('ogg') ? 'video/ogg' : 'video/mp4'}">
+      Your browser doesn't support video tag.
+    </video></div>`,
+    $action: dialogAction(id),
+  });
+  bindCopyLink(id, link);
+  const action = await dialog.open();
+  if (action === 'download') window.open(link);
+}
+
+async function previewImage(link) {
+  const id = nanoid();
+  const dialog = new InfoDialog({
+    $body: tpl`<div class="typo"><img src="${link}" style="max-height: calc(80vh - 45px);"></img></div>`,
+    $action: dialogAction(id),
+  });
+  bindCopyLink(id, link);
+  const action = await dialog.open();
+  if (action === 'download') window.open(link);
+}
+
+async function previewPDF(link) {
+  const uuidURL = URL.createObjectURL(new Blob());
+  const uuid = uuidURL.toString();
+  URL.revokeObjectURL(uuidURL);
+  const id = nanoid();
+  const dialog = new InfoDialog({
+    $body: tpl`
+      <div class="typo" style="height: 100%;">
+        <object classid="clsid:${(uuid.substring(uuid.lastIndexOf('/') + 1))}">
+          <param name="SRC" value="${link}" >
+          <embed width="100%" style="height: 100%;border: none;" src="${link}">
+            <noembed></noembed>
+          </embed>
+        </object>
+      </div>`,
+    width: `${window.innerWidth - 200}px`,
+    height: `${window.innerHeight - 100}px`,
+    $action: dialogAction(id),
+  });
+  bindCopyLink(id, link);
+  const action = await dialog.open();
+  if (action === 'download') window.open(link);
+}
+
+async function previewOffice(link, src) {
+  const id = nanoid();
+  const dialog = new InfoDialog({
+    $body: tpl`
+      <div class="typo">
+        <iframe src="https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(new URL(src, window.location.href).toString())}"
+          scrolling="no" border="0" frameborder="no" framespacing="0" width="100%" style="height: 70vh;"></iframe>
+      </div>`,
+    width: `${window.innerWidth - 200}px`,
+    height: `${window.innerHeight - 100}px`,
+    $action: dialogAction(id),
+  });
+  bindCopyLink(id, link);
+  const action = await dialog.open();
+  if (action === 'download') window.open(link);
+}
+
+export async function previewFile(ev?, type = '') {
+  if (ev?.metaKey || ev?.ctrlKey || ev?.shiftKey) return null;
+  if (ev) ev.preventDefault();
+  const filename = ev
+    ? ev.currentTarget.closest('[data-filename]').getAttribute('data-filename')
+    // eslint-disable-next-line no-alert
+    : prompt(i18n('Filename'));
+  if (!filename) return null;
+  const filesize = ev
+    ? +ev.currentTarget.closest('[data-size]').getAttribute('data-size')
+    : 0;
+  let content = '';
+  if (ev) {
+    const link = $(ev.currentTarget).find('a').attr('href');
+    if (!link) return null;
+    type ||= ev.currentTarget.getAttribute('data-preview');
+    const ext = filename.split('.').pop().toLowerCase();
+    if (['zip', 'rar', '7z'].includes(ext) || filesize > 8 * 1024 * 1024) {
+      const id = nanoid();
+      const dialog = new ActionDialog({
+        $body: tpl.typoMsg(i18n('Cannot preview this file. Download now?')),
+        $action: dialogAction(id),
+      });
+      bindCopyLink(id, link);
+      const action = await dialog.open();
+      if (action === 'ok') window.open(link);
+      return null;
+    }
+    if (['mp4', 'webm', 'ogg'].includes(ext)) return previewVideo(link);
+    if (['png', 'jpeg', 'jpg', 'gif', 'webp', 'bmp'].includes(ext)) return previewImage(link);
+    if (ext === 'pdf') return previewPDF(`${link}${link.includes('?') ? '&' : '?'}noDisposition=1`);
+    Notification.info(i18n('Loading file...'));
+    try {
+      const { url } = await request.get(link, {}, { headers: { Pragma: 'no-cache' } });
+      if (/^(?:doc|xls|ppt)x?$/.test(ext)) return previewOffice(link, url);
+      content = await request.get(url, undefined, { dataType: 'text' });
+    } catch (e) {
+      Notification.error(i18n('Failed to load file: {0}', e.message));
+      throw e;
+    }
+  } else Notification.info(i18n('Loading editor...'));
+  const val = await startEdit(filename, content, type || 'file');
+  if (typeof val !== 'string') return null;
+  const file = new File([val], filename, { type: 'text/plain' });
+  const endpoint = new URL(!window.location.href.endsWith('/files')
+    ? `${window.location.href.substring(0, window.location.href.lastIndexOf('/'))}/files` : '', window.location.href);
+  const sidebarType = type || $(ev.currentTarget).closest('[data-fragment-id]').data('type');
+  const sidebar = ev && $(ev.currentTarget).closest('[data-fragment-id]').data('sidebar') !== undefined;
+  await uploadFiles(endpoint.toString(), [file], {
+    type: sidebarType || type,
+    sidebar,
+    pjax: true,
+  });
+  return null;
+}
+
+const dataPreviewPage = new AutoloadPage('dataPreview', () => {
+  $(document).on('click', '[data-preview]', previewFile);
+});
+
+window.Hydro.components.preview = { startEdit, previewFile };
+export default dataPreviewPage;

package/components/problem/create.page.js

@@ -0,0 +1,12 @@
+import $ from 'jquery';
+import { alert } from 'vj/components/dialog';
+import { NamedPage } from 'vj/misc/Page';
+import { i18n } from 'vj/utils';
+
+export default new NamedPage(['problem_create', 'problem_edit'], () => {
+  $('input[name="pid"]').on('blur', () => {
+    if (/^[0-9]+$/.test($('input[name="pid"]').val())) {
+      alert(i18n('Problem ID cannot be a pure number. Leave blank if you want to use numberic id.'));
+    }
+  });
+});

package/components/problem/list.page.js

@@ -0,0 +1,9 @@
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+
+export default new AutoloadPage('problemListPage', () => {
+  $('.col--problem-name>a').attr('target', '_blank');
+  $(document).on('vjContentNew', () => {
+    $('.col--problem-name>a').attr('target', '_blank');
+  });
+});

package/components/problem/rp.page.styl

@@ -0,0 +1,4 @@
+.problem__rp-tag
+  font-size: 0.8em
+  padding: rem(0 5px)
+  color: #AAA

package/components/problem/tag.page.styl

@@ -0,0 +1,84 @@
+.problem__tags
+  margin: 0 !important
+  padding: 0 !important
+  list-style: none !important
+  font-size: 0
+  word-break: keep-all
+  display: flex
+  flex-wrap: wrap
+
+.problem__tag
+  display: inline-block
+  vertical-align: top
+  height: rem($table-lh)
+  margin: rem(0 2px 2px 0) !important
+  padding: 0 !important
+
+.problem__tag-item
+  padding: 0 10px !important
+  margin-left: rem(3px)
+  margin-bottom: rem(5px)
+  line-height: 30px !important
+  display: inline-flex
+  flex-direction: row
+  align-items: center
+  border: none
+  border-radius: 2px
+  box-shadow: none
+  font-size: 14px
+  line-height: 18px
+  max-width: 100%
+  min-height: 30px
+  min-width: 30px
+  padding: 6px 8px
+  position: relative
+  background-color: rgba(143, 153, 168, 0.15)
+  color: #1c2127
+  &:hover
+    text-decoration: none
+  > span
+    display: flex
+    align-items: center
+  > *
+    flex-grow: 0
+    flex-shrink: 0
+    margin-right: 8px
+  &:before,
+  > *
+    margin-right: 4px
+  > :last-child
+    margin-right: 0
+  &:focus
+    outline: rgba(33, 93, 176, 0.752) solid 2px
+    outline-offset: 0
+    -moz-outline-radius: 6px
+  &.interactive
+    cursor: pointer
+    &:hover
+      background: rgba(143, 153, 168, 0.3)
+      color: #111418
+
+.problem__tag-link
+  display: inline-block
+  padding: rem(0 7px)
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+  max-width: rem(250px)
+  line-height: rem($table-lh)
+  height: rem($table-lh)
+  background: #F0F0F0
+  color: $text-1-color !important
+  font-size: rem($font-size-small)
+
+  &:hover
+    background: $primary-color
+    color: #FFF !important
+    text-decoration: none
+
+.col--problem-name
+  .problem__tags
+    float: right
+
+  .problem__tag
+    margin: rem(0 2px 0 0) !important

package/components/problemconfig/BasicForm.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { i18n } from 'vj/utils';
+import FileSelectAutoComplete from '../autocomplete/components/FileSelectAutoComplete';
+import LanguageSelectAutoComplete from '../autocomplete/components/LanguageSelectAutoComplete';
+import type { RootState } from './reducer/index';
+
+export 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];
+type FileSelectKey = 'checker' | 'interactor' | 'manager';
+
+export 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 || ''}
+      type={typeof value === 'number' ? 'number' : 'text'}
+      onChange={(ev) => {
+        dispatch({ type: 'CONFIG_FORM_UPDATE', key: formKey, value: ev.currentTarget.value });
+      }}
+      className="textbox"
+    />
+  );
+}
+
+export function ManagedSelect({ options, formKey }: { options: string[], formKey: KeyType<RootState['config']> }) {
+  const value = useSelector((state: RootState) => state.config[formKey]);
+  const dispatch = useDispatch();
+  return (
+    <select
+      value={value || ''}
+      onChange={(ev) => {
+        dispatch({ type: 'CONFIG_FORM_UPDATE', key: formKey, value: ev.currentTarget.value });
+      }}
+      className="select"
+    >
+      {options.map((o) => (<option id={o} key={o}>{o}</option>))}
+    </select>
+  );
+}
+
+export function SingleFileSelect({ formKey, withLang = false, label = 'Checker' }: { formKey: FileSelectKey, withLang?: boolean, label?: string }) {
+  const value = useSelector((state: RootState) => state.config[formKey]);
+  const Files = useSelector((state: RootState) => state.testdata);
+  const dispatch = useDispatch();
+  const selectedFile = typeof value === 'string' ? value : value?.file || '';
+  const selectedLang = typeof value === 'string' ? 'auto' : value?.lang || 'auto';
+  const update = (file: string, lang: string) => {
+    if (file === selectedFile && lang === selectedLang) return;
+    if (withLang) dispatch({ type: 'CONFIG_FORM_UPDATE', key: formKey, value: file ? { file, lang } : null });
+    else dispatch({ type: 'CONFIG_FORM_UPDATE', key: formKey, value: file });
+  };
+  return withLang ? (<>
+    <FormItem columns={5} label={label}>
+      <FileSelectAutoComplete
+        width="100%"
+        data={Files}
+        selectedKeys={[selectedFile]}
+        onChange={(val) => update(val, selectedLang)}
+      />
+    </FormItem>
+    <FormItem columns={3} label="Language">
+      <LanguageSelectAutoComplete
+        selectedKeys={[selectedLang]}
+        onChange={(val) => update(selectedFile, val)}
+        withAuto
+      />
+    </FormItem>
+  </>) : (<FileSelectAutoComplete
+    width="100%"
+    data={Files}
+    selectedKeys={[selectedFile]}
+    onChange={(val) => update(val, selectedLang)}
+  />);
+}