core&ui: add contest private files (#1053)

Co-authored-by: panda <panda_dtdyy@outlook.com>

packages/ui-default/components/upload.tsx

@@ -1,5 +1,6 @@
 import { Classes } from '@blueprintjs/core';
 import $ from 'jquery';
+import React from 'react';
 import { Dialog } from 'vj/components/dialog/index';
 import Notification from 'vj/components/notification';
 import {
@@ -82,9 +83,9 @@ export default async function uploadFiles(endpoint = '', files: File[] | FileLis
     Notification.success(i18n('File uploaded successfully.'));
     if (options.pjax) {
       let params = '';
-      if (options.type) params += `? d = ${options.type} `;
-      if (options.sidebar) params += `${params ? '&' : '?'} sidebar = true`;
-      await pjax.request({ push: false, url: `${endpoint}${params || ''} ` });
+      if (options.type) params += `?d=${encodeURIComponent(options.type)}`;
+      if (options.sidebar) params += `${params ? '&' : '?'}sidebar=true`;
+      await pjax.request({ push: false, url: `${endpoint}${params || ''}` });
     }
   } catch (e) {
     console.error(e);

packages/ui-default/locales/ko.yaml

@@ -432,7 +432,6 @@ name: 이름
 Name: 이름
 Network error: Network error
 Never expire: 영원히 만료되지 않음
-New dataset: 새 데이터셋
 New Email: 새 이메일
 New file: 새 파일
 New Password: 새 비밀번호

packages/ui-default/locales/zh.yaml

@@ -86,6 +86,7 @@ Add suffix: 添加后缀
 Add testcase: 添加测试点
 Add User: 添加用户
 Add: 添加
+Additional Files: 附加文件
 additional_file: 附加文件
 All {0} Contests: 所有 {0} 比赛
 All changes will be lost. Are you sure to clear all answers?: 所有更改将会丢失。您确定要清除所有答案吗？
@@ -391,8 +392,8 @@ Failed to parse testcase.: 无法解析测试点信息。
 Feedback: 反馈
 Field {0} or {1} validation failed.: 字段 {0} 或 {1} 验证失败。
 Field {0} validation failed.: 字段 {0} 验证失败。
-File have been deleted.: 文件已被删除。
-File have been renamed.: 文件已被重命名。
+File has been deleted.: 文件已被删除。
+File has been renamed.: 文件已被重命名。
 File saved.: 文件已成功保存。
 file too large: 文件过大
 File uploaded successfully.: 上传文件成功
@@ -585,9 +586,8 @@ Nav Logo Light: 左上角图标（亮）
 Nav Logo Light@2x: 左上角图标（亮）（大）
 Network error: 网络错误
 Never expire: 从不过期
-New dataset: 新测试数据
 New Email: 新电子邮件
-New file: 新文件
+New Filename: 新文件名
 New filename(s): 新文件名
 New Password: 新密码
 New Training Plan: 新训练计划

packages/ui-default/pages/contest.page.styl

@@ -217,5 +217,7 @@ $highlight-button-color = #F6DF45
     width: rem(130px)
 
 .page--contest_manage
+  .col--id
+    width: rem(80px)
   .col--score
     width: rem(80px)

packages/ui-default/pages/contest_clarification.page.tsx

@@ -0,0 +1,25 @@
+import $ from 'jquery';
+import { NamedPage } from 'vj/misc/Page';
+
+function handleReplyOrBroadcast(ev) {
+  const title = $(ev.currentTarget).data('title');
+  const did = $(ev.currentTarget).data('did');
+
+  $('#reply_or_broadcast .section_title').text(title);
+  $('#reply_or_broadcast [name="did"]').val(did ?? '');
+  const $item = $(`#clarification_${did} .media`);
+  if ($item.length) {
+    $('#reply_or_broadcast .form__item_subject').hide();
+    $('#reply_or_broadcast .clarification-container').empty().append($item.clone());
+  } else {
+    $('#reply_or_broadcast .form__item_subject').show();
+    $('#reply_or_broadcast .clarification-container').empty();
+  }
+}
+
+const page = new NamedPage('contest_clarification', () => {
+  $(document).on('click', '[name="broadcast"]', handleReplyOrBroadcast);
+  $(document).on('click', '[name="reply"]', handleReplyOrBroadcast);
+});
+
+export default page;

packages/ui-default/pages/contest_manage.page.ts

@@ -4,25 +4,7 @@ import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
 import { i18n, request, tpl } from 'vj/utils';
 
-function handleReplyOrBroadcast(ev) {
-  const title = $(ev.currentTarget).data('title');
-  const did = $(ev.currentTarget).data('did');
-
-  $('#reply_or_broadcast .section_title').text(title);
-  $('#reply_or_broadcast [name="did"]').val(did ?? '');
-  const $item = $(`#clarification_${did} .media`);
-  if ($item.length) {
-    $('#reply_or_broadcast .form__item_subject').hide();
-    $('#reply_or_broadcast .clarification-container').empty().append($item.clone());
-  } else {
-    $('#reply_or_broadcast .form__item_subject').show();
-    $('#reply_or_broadcast .clarification-container').empty();
-  }
-}
-
 const page = new NamedPage('contest_manage', () => {
-  $(document).on('click', '[name="broadcast"]', handleReplyOrBroadcast);
-  $(document).on('click', '[name="reply"]', handleReplyOrBroadcast);
   $(document).on('click', '[name="set_score"]', async (ev) => {
     const pid = $(ev.currentTarget).data('pid');
     const op = await new ActionDialog({

packages/ui-default/pages/files.page.js

@@ -1,102 +0,0 @@
-import $ from 'jquery';
-import _ from 'lodash';
-import { ConfirmDialog } from 'vj/components/dialog/index';
-import Notification from 'vj/components/notification';
-import uploadFiles from 'vj/components/upload';
-import { NamedPage } from 'vj/misc/Page';
-import {
-  i18n, pjax, request, tpl,
-} from 'vj/utils';
-
-function ensureAndGetSelectedFiles() {
-  const files = _.map(
-    $('.files tbody [data-checkbox-group="files"]:checked'),
-    (ch) => $(ch).closest('tr').attr('data-filename'),
-  );
-  if (files.length === 0) {
-    Notification.error(i18n('Please select at least one file to perform this operation.'));
-    return null;
-  }
-  return files;
-}
-
-async function handleClickUpload(files) {
-  if (!files) {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.multiple = true;
-    input.click();
-    await new Promise((resolve) => { input.onchange = resolve; });
-    files = input.files;
-  }
-  if (!files.length) {
-    Notification.warn(i18n('No file selected.'));
-    return;
-  }
-  await uploadFiles('', files, { pjax: true });
-}
-
-async function handleClickRemoveSelected() {
-  const selectedFiles = ensureAndGetSelectedFiles();
-  if (selectedFiles === null) return;
-  const action = await new ConfirmDialog({
-    $body: tpl`
-      <div class="typo">
-        <p>${i18n('Confirm to delete the selected files?')}</p>
-      </div>`,
-  }).open();
-  if (action !== 'yes') return;
-  try {
-    await request.post('', {
-      operation: 'delete_files',
-      files: selectedFiles,
-    });
-    Notification.success(i18n('Selected files have been deleted.'));
-    await pjax.request({ push: false });
-  } catch (error) {
-    Notification.error(error.message);
-  }
-}
-
-/**
- * @param {JQuery.DragOverEvent<HTMLElement, undefined, HTMLElement, HTMLElement>} ev
- */
-function handleDragOver(ev) {
-  ev.preventDefault();
-  // TODO display a drag-drop allowed hint
-}
-
-/**
- * @param {JQuery.DropEvent<HTMLElement, undefined, HTMLElement, HTMLElement>} ev
- */
-function handleDrop(ev) {
-  ev.preventDefault();
-  if (!$('[name="upload_file"]').length) {
-    Notification.error(i18n("You don't have permission to upload file."));
-    return;
-  }
-  ev = ev.originalEvent;
-  const files = [];
-  if (ev.dataTransfer.items) {
-    for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-      if (ev.dataTransfer.items[i].kind === 'file') {
-        const file = ev.dataTransfer.items[i].getAsFile();
-        files.push(file);
-      }
-    }
-  } else {
-    for (let i = 0; i < ev.dataTransfer.files.length; i++) {
-      files.push(ev.dataTransfer.files[i]);
-    }
-  }
-  handleClickUpload(files);
-}
-
-const page = new NamedPage(['home_files', 'contest_manage', 'training_files', 'homework_files'], () => {
-  $(document).on('click', '[name="upload_file"]', () => handleClickUpload());
-  $(document).on('click', '[name="remove_selected"]', () => handleClickRemoveSelected());
-  $(document).on('dragover', '.files', (ev) => handleDragOver(ev));
-  $(document).on('drop', '.files', (ev) => handleDrop(ev));
-});
-
-export default page;

packages/ui-default/pages/files.page.styl

@@ -1,9 +1,24 @@
-.page--home_files, .page--training_files, .page--contest_detail, .page--contest_manage, .page--homework_files
+.page--home_files, .page--training_files, .page--contest_detail, .page--contest_manage, .page--homework_files, .page--contest_edit, .page--problem_edit, .page--problem_config, .page--problem_files
   .col--checkbox
     width: 60px
 
   .col--size
-    width: 100px
+    width: 80px
 
   .col--operation
     width: 40px
+
+.page--problem_edit, .page--problem_config, .page--problem_files
+  .col--operation
+    width: 60px
+
+  .problem-sidebar-additional_file, .problem-sidebar-testdata
+    height: 300px
+    overflow-y: auto
+
+  .rename-confirm-table
+    overflow-x: auto
+
+    .col--origin, .col--new
+      width: 50%
+      text-align: center

packages/ui-default/pages/files.page.tsx

@@ -0,0 +1,348 @@
+import $ from 'jquery';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionDialog, confirm, prompt } from 'vj/components/dialog/index';
+import Notification from 'vj/components/notification';
+import uploadFiles from 'vj/components/upload';
+import { NamedPage } from 'vj/misc/Page';
+import {
+  i18n, pjax, request, tpl,
+} from 'vj/utils';
+
+let endpoint = '';
+
+const getUrl = (type: string, sidebar: boolean) => {
+  let url = endpoint;
+  const search = new URLSearchParams();
+  if (type) search.append('d', type);
+  if (sidebar) search.append('sidebar', 'true');
+  if (search.size) url += `?${search.toString()}`;
+  return url;
+};
+
+const extractArgsFromEvent = (ev) => {
+  return {
+    file: $(ev.currentTarget).parent().parent().attr('data-filename'),
+    type: $(ev.target).closest('[data-type]').attr('data-type') || '',
+    sidebar: !!$(ev.target).closest('[data-sidebar]').length,
+  };
+};
+
+function ensureAndGetSelectedFiles(type = '') {
+  const allChecked = $(`.files tbody [data-checkbox-group="${type || 'files'}"]:checked`);
+  const files = allChecked.get().map((i) => $(i).closest('tr').attr('data-filename'));
+  if (files.length === 0) {
+    Notification.error(i18n('Please select at least one file to perform this operation.'));
+    return null;
+  }
+  return files;
+}
+
+async function handleClickUpload(
+  ev: JQuery.ClickEvent<Document, undefined, HTMLElement, HTMLElement> | JQuery.DropEvent<Document, undefined, HTMLElement, HTMLElement>,
+  files?: File[] | FileList,
+) {
+  const { type, sidebar } = extractArgsFromEvent(ev);
+  if (!files) {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.click();
+    await new Promise((resolve) => { input.onchange = resolve; });
+    files = input.files;
+  }
+  if (!files.length) {
+    Notification.warn(i18n('No file selected.'));
+    return;
+  }
+  await uploadFiles(endpoint, files, { pjax: true, type, sidebar });
+}
+
+async function handleClickRename(ev) {
+  const { file, type, sidebar } = extractArgsFromEvent(ev);
+  const res = await prompt(i18n('Enter a new name for the file: '), {
+    name: {
+      type: 'text',
+      required: true,
+      label: i18n('New Filename'),
+    },
+  });
+  if (!res?.name) return;
+  try {
+    await request.post(endpoint, {
+      operation: 'rename_files',
+      files: [file],
+      newNames: [res.name],
+      type,
+    });
+    Notification.success(i18n('File has been renamed.'));
+    await pjax.request({ url: getUrl(type, sidebar), push: false });
+  } catch (error) {
+    Notification.error(error.message);
+  }
+}
+
+async function handleClickRenameSelected(ev) {
+  const { type, sidebar } = extractArgsFromEvent(ev);
+  const selectedFiles = ensureAndGetSelectedFiles(type);
+  if (!selectedFiles?.length) return;
+  let onActionButton = (_: string) => false;
+
+  function Rename(props) {
+    const [original, setOriginal] = React.useState('');
+    const [replace, setReplace] = React.useState('');
+    const [prefix, setPrefix] = React.useState('');
+    const [suffix, setSuffix] = React.useState('');
+    const [regexValid, setRegexValid] = React.useState(true);
+    const [wantNext, setWantNext] = React.useState(false);
+    const [preview, setPreview] = React.useState(false);
+    const [highlight, setHighlight] = React.useState(null);
+    const [newNames, setNewNames] = React.useState(props.names);
+    const [prism, setPrism] = React.useState(null);
+
+    React.useEffect(() => {
+      const load = import('../components/highlighter/prismjs');
+      load.then(({ default: p }) => {
+        setPrism(p.Prism);
+      }).catch(() => { });
+    }, []);
+
+    React.useEffect(() => {
+      let s: string | RegExp = original;
+      setRegexValid(true);
+      setHighlight(null);
+      if (original.length > 2 && original.startsWith('/')) {
+        const availableFlags = ['g', 'i'];
+        const flags = [];
+        let copy = original.substring(1);
+        while (availableFlags.includes(copy[copy.length - 1])) {
+          flags.push(copy[copy.length - 1]);
+          copy = copy.substring(0, copy.length - 1);
+        }
+        if (copy.endsWith('/')) {
+          copy = copy.substring(0, copy.length - 1);
+          flags.reverse();
+          if (prism) setHighlight(`/${prism.highlight(copy, prism.languages.regex, 'RegExp')}/${flags.join('')}`);
+          try {
+            s = new RegExp(copy, flags.join(''));
+            setRegexValid(true);
+          } catch (e) {
+            setRegexValid(false);
+          }
+        }
+      }
+      setNewNames(selectedFiles.map((file) => {
+        if (s) file = file.replace(s, replace);
+        return prefix + file + suffix;
+      }));
+    }, [original, replace, prefix, suffix, prism]);
+
+    onActionButton = (action) => {
+      if (action === 'ok') {
+        if (!preview) {
+          if (!regexValid) return false;
+          if (!original && !prefix && !suffix) {
+            setWantNext(true);
+            return false;
+          }
+          setPreview(true);
+          return false;
+        }
+        request.post(endpoint, {
+          operation: 'rename_files',
+          files: selectedFiles,
+          newNames,
+          type,
+        }).then(() => {
+          Notification.success(i18n('Selected files have been renamed.'));
+          pjax.request({ url: getUrl(type, sidebar), push: false });
+        }).catch((error) => {
+          Notification.error(error.message);
+        });
+        return true;
+      }
+      if (preview) {
+        setPreview(false);
+        return false;
+      }
+      return true;
+    };
+
+    const style = { fontFamily: 'var(--code-font-family)' };
+
+    return <div className="typo" style={{ maxHeight: '60vh', overflow: 'scroll' }}>
+      {!preview ? <>
+        <div className="row">
+          <div className="medium-6 small-6 columns">
+            <h2>{i18n('Batch replacement')}</h2>
+            <label>{i18n('Original content')}
+              <div style={{ position: 'relative' }}>
+                <div className="textbox-container" style={{ zIndex: 1, position: 'relative' }}>
+                  <input
+                    className="textbox"
+                    type="text"
+                    style={{ ...style, ...(highlight ? { color: 'transparent', background: 'transparent', caretColor: 'black' } : {}) }}
+                    value={original}
+                    onChange={(e) => setOriginal(e.currentTarget.value)}
+                  />
+                </div>
+                <div
+                  className="textbox-container"
+                  style={{
+                    position: 'absolute', top: 0, left: 0, zIndex: 0,
+                  }}
+                >
+                  {highlight && <span
+                    className="textbox"
+                    style={{
+                      ...style, border: 'none', display: 'inline-flex', alignItems: 'center',
+                    }}
+                    dangerouslySetInnerHTML={{ __html: highlight }}
+                  />}
+                </div>
+              </div>
+            </label>
+            <label>{i18n('Replace with')}
+              <div className="textbox-container">
+                <input className="textbox" type="text" value={replace} onChange={(e) => setReplace(e.currentTarget.value)}></input>
+              </div>
+            </label>
+          </div>
+          <div className="medium-6 small-6 columns">
+            <h2>{i18n('Add prefix/suffix')}</h2>
+            <label>{i18n('Add prefix')}
+              <div className="textbox-container">
+                <input className="textbox" type="text" value={prefix} onChange={(e) => setPrefix(e.currentTarget.value)}></input>
+              </div>
+            </label>
+            <label>{i18n('Add suffix')}
+              <div className="textbox-container">
+                <input className="textbox" type="text" value={suffix} onChange={(e) => setSuffix(e.currentTarget.value)}></input>
+              </div>
+            </label>
+          </div>
+        </div>
+        <div className="row">
+          <div className="medium-12 columns">
+            <p>{!regexValid ? i18n('Invalid RegExp') : wantNext ? i18n('No changes to make.') : i18n('RegExp supported, quote with "/"')}</p>
+          </div>
+        </div>
+      </> : <div>
+        <p>{i18n('Are you sure to rename the following file?')}</p>
+        <ul>
+          {original && <li>Replace {original} with {replace}</li>}
+          {prefix && <li>Add {prefix} as prefix</li>}
+          {suffix && <li>Add {suffix} as suffix</li>}
+        </ul>
+        <table className="data-table rename-confirm-table">
+          <colgroup>
+            <col className="col--origin" />
+            <col className="col--new" />
+          </colgroup>
+          <thead>
+            <tr>
+              <th className="col--origin">{i18n('Original filename(s)')}</th>
+              <th className="col--new">{i18n('New filename(s)')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {selectedFiles.map((file, index) => <tr key={file}>
+              <td className="col--origin">{file}</td>
+              <td className="col--new">{newNames[index]}</td>
+            </tr>)}
+          </tbody>
+        </table>
+      </div>}
+    </div>;
+  }
+
+  const promise = new ActionDialog({
+    $body: tpl`<div id="rename_dialog"></div>`,
+    width: '600px',
+    onDispatch(action) {
+      return onActionButton(action);
+    },
+  }).open();
+  const root = ReactDOM.createRoot(document.getElementById('rename_dialog'));
+  root.render(<Rename names={selectedFiles} />);
+  await promise;
+  root.unmount();
+}
+
+async function handleClickRemove(ev) {
+  const { file, type, sidebar } = extractArgsFromEvent(ev);
+  if (!(await confirm(i18n('Confirm to delete the file?')))) return;
+  try {
+    await request.post(endpoint, {
+      operation: 'delete_files',
+      files: [file],
+      type,
+    });
+    Notification.success(i18n('File has been deleted.'));
+    await pjax.request({ url: getUrl(type, sidebar), push: false });
+  } catch (error) {
+    Notification.error(error.message);
+  }
+}
+
+async function handleClickRemoveSelected(ev: JQuery.ClickEvent<Document, undefined, HTMLElement, HTMLElement>) {
+  const { type, sidebar } = extractArgsFromEvent(ev);
+  const selectedFiles = ensureAndGetSelectedFiles(type);
+  if (selectedFiles === null) return;
+  if (!(await confirm(i18n('Confirm to delete the selected files?')))) return;
+  try {
+    await request.post(endpoint, {
+      operation: 'delete_files',
+      files: selectedFiles,
+      type,
+    });
+    Notification.success(i18n('Selected files have been deleted.'));
+    await pjax.request({ url: getUrl(type, sidebar), push: false });
+  } catch (error) {
+    Notification.error(error.message);
+  }
+}
+
+function handleDragOver(ev: JQuery.DragOverEvent<Document, undefined, HTMLElement, HTMLElement>) {
+  ev.preventDefault();
+  // TODO display a drag-drop allowed hint
+}
+
+function handleDrop(e: JQuery.DropEvent<Document, undefined, HTMLElement, HTMLElement>) {
+  e.preventDefault();
+  if (!$('[name="upload_file"]').length) {
+    Notification.error(i18n("You don't have permission to upload file."));
+    return;
+  }
+  const ev = e.originalEvent;
+  const files = [];
+  if (ev.dataTransfer.items) {
+    for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+      if (ev.dataTransfer.items[i].kind === 'file') {
+        const file = ev.dataTransfer.items[i].getAsFile();
+        files.push(file);
+      }
+    }
+  } else {
+    for (let i = 0; i < ev.dataTransfer.files.length; i++) {
+      files.push(ev.dataTransfer.files[i]);
+    }
+  }
+  handleClickUpload(e, files);
+}
+
+const page = new NamedPage([
+  'problem_files', 'problem_edit', 'contest_edit', 'contest_manage',
+  'home_files', 'training_files', 'homework_files',
+], (pageName) => {
+  if (pageName === 'problem_edit') endpoint = './files';
+  $(document).on('click', '[name="file_rename"]', (ev) => handleClickRename(ev));
+  $(document).on('click', '[name="file_remove"]', (ev) => handleClickRemove(ev));
+  $(document).on('click', '[name="upload_file"]', (ev) => handleClickUpload(ev));
+  $(document).on('click', '[name="rename_selected"]', (ev) => handleClickRenameSelected(ev));
+  $(document).on('click', '[name="remove_selected"]', (ev) => handleClickRemoveSelected(ev));
+  $(document).on('dragover', '.files', (ev) => handleDragOver(ev));
+  $(document).on('drop', '.files', (ev) => handleDrop(ev));
+});
+
+export default page;

packages/ui-default/pages/problem_config.page.styl

@@ -1,14 +1,4 @@
 .page--problem_config
-  .problem-sidebar-testdata
-    max-height: 270px
-    overflow-y: auto
-
-  .col--size
-    width: 80px
-  .col--operation
-    width: 60px
-    text-align: center
-
   .textbox,.select
     margin: 0
   

packages/ui-default/pages/problem_config.page.tsx

@@ -52,7 +52,7 @@ const page = new NamedPage('problem_config', () => {
         newNames: [newName],
         type: 'testdata',
       });
-      Notification.success(i18n('File have been renamed.'));
+      Notification.success(i18n('File has been renamed.'));
       await pjax.request({ url: './files?d=testdata&sidebar=true', push: false });
     } catch (error) {
       Notification.error(error.message);
@@ -68,7 +68,7 @@ const page = new NamedPage('problem_config', () => {
         files: file,
         type: 'testdata',
       });
-      Notification.success(i18n('File have been deleted.'));
+      Notification.success(i18n('File has been deleted.'));
       reduxStore.dispatch({
         type: 'CONFIG_DELETE_TESTDATA',
         value: file,

packages/ui-default/pages/problem_edit.page.js

@@ -1,15 +1,11 @@
 import $ from 'jquery';
 import _ from 'lodash';
-import { ConfirmDialog } from 'vj/components/dialog';
+import { confirm } from 'vj/components/dialog';
 import Dropdown from 'vj/components/dropdown/Dropdown';
 import Editor from 'vj/components/editor/index';
 import Notification from 'vj/components/notification';
-import uploadFiles from 'vj/components/upload';
-import download from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
-import {
-  i18n, pjax, request, slideDown, slideUp, tpl,
-} from 'vj/utils';
+import { i18n, request } from 'vj/utils';
 
 const categories = {};
 const dirtyCategories = [];
@@ -139,21 +135,6 @@ function buildCategoryFilter() {
   });
 }
 
-async function handleSection(ev, sidebar, type) {
-  const $section = $(ev.currentTarget).closest(`.section--problem-sidebar-${sidebar}`);
-  if ($section.is(`.${type}d, .animating`)) return;
-  $section.addClass('animating');
-  const $detail = $section.find(`.section--problem-sidebar-${sidebar}__detail`);
-  if (type === 'expand') {
-    await slideDown($detail, 300, { opacity: 0 }, { opacity: 1 });
-  } else {
-    await slideUp($detail, 300, { opacity: 1 }, { opacity: 0 });
-  }
-  $section.addClass(type === 'expand' ? 'expanded' : 'collapsed');
-  $section.removeClass(type === 'expand' ? 'collapsed' : 'expanded');
-  $section.removeClass('animating');
-}
-
 export default new NamedPage(['problem_create', 'problem_edit'], () => {
   let confirmed = false;
   $(document).on('click', '[name="operation"]', (ev) => {
@@ -165,14 +146,8 @@ export default new NamedPage(['problem_create', 'problem_edit'], () => {
         Notification.error(e.message);
       });
     }
-    const message = 'Confirm deleting this problem? Its files, submissions, discussions and solutions will be deleted as well.';
-    return new ConfirmDialog({
-      $body: tpl`
-        <div class="typo">
-          <p>${i18n(message)}</p>
-        </div>`,
-    }).open().then((action) => {
-      if (action !== 'yes') return;
+    return confirm(i18n('Confirm deleting this problem? Its files, submissions, discussions and solutions will be deleted as well.')).then((yes) => {
+      if (!yes) return;
       confirmed = true;
       ev.target.click();
     });
@@ -181,65 +156,6 @@ export default new NamedPage(['problem_create', 'problem_edit'], () => {
   buildCategoryFilter();
   parseCategorySelection();
 
-  async function handleClickUpload() {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.multiple = true;
-    input.click();
-    await new Promise((resolve) => { input.onchange = resolve; });
-    await uploadFiles('./files', input.files, {
-      type: 'additional_file',
-      sidebar: true,
-      pjax: true,
-    });
-  }
-
-  async function handleClickRename(ev) {
-    const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
-    // eslint-disable-next-line no-alert
-    const newName = prompt(i18n('Enter a new name for the file: '));
-    if (!newName) return;
-    try {
-      await request.post('./files', {
-        operation: 'rename_files',
-        files: file,
-        newNames: [newName],
-        type: 'additional_file',
-      });
-      Notification.success(i18n('File have been renamed.'));
-      await pjax.request({ url: './files?d=additional_file&sidebar=true', push: false });
-    } catch (error) {
-      Notification.error(error.message);
-    }
-  }
-
-  async function handleClickRemove(ev) {
-    const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
-    const action = await new ConfirmDialog({
-      $body: tpl.typoMsg(i18n('Confirm to delete the file?')),
-    }).open();
-    if (action !== 'yes') return;
-    try {
-      await request.post('./files', {
-        operation: 'delete_files',
-        files: file,
-        type: 'additional_file',
-      });
-      Notification.success(i18n('File have been deleted.'));
-      await pjax.request({ url: './files?d=additional_file&sidebar=true', push: false });
-    } catch (error) {
-      Notification.error(error.message);
-    }
-  }
-
-  async function handleClickDownloadAll() {
-    const files = $('.additional_file-table tr').map(function () { return $(this).attr('data-filename'); }).get();
-    const { links, pdoc } = await request.post('./files', { operation: 'get_links', files, type: 'additional_file' });
-    const targets = [];
-    for (const filename of Object.keys(links)) targets.push({ filename, url: links[filename] });
-    await download(`${pdoc.docId} ${pdoc.title}.zip`, targets);
-  }
-
   const $main = $('textarea[data-editor]');
   const $field = $('textarea[data-markdown-upload]');
   let content = $field.val();
@@ -294,12 +210,4 @@ export default new NamedPage(['problem_create', 'problem_edit'], () => {
       ev.preventDefault();
     }
   });
-  $(document).on('click', '[name="additional_file__upload"]', () => handleClickUpload());
-  $(document).on('click', '[name="additional_file__rename"]', (ev) => handleClickRename(ev));
-  $(document).on('click', '[name="additional_file__delete"]', (ev) => handleClickRemove(ev));
-  $(document).on('click', '[name="additional_file__download"]', () => handleClickDownloadAll());
-  $(document).on('click', '[name="additional_file__section__expand"]', (ev) => handleSection(ev, 'additional_file', 'expand'));
-  $(document).on('click', '[name="additional_file__section__collapse"]', (ev) => handleSection(ev, 'additional_file', 'collapse'));
-  $(document).on('click', '[name="tags__section__expand"]', (ev) => handleSection(ev, 'tags', 'expand'));
-  $(document).on('click', '[name="tags__section__collapse"]', (ev) => handleSection(ev, 'tags', 'collapse'));
 });

packages/ui-default/pages/problem_edit.page.styl

@@ -1,10 +0,0 @@
-.page--problem_edit,.page--problem_create
-  .problem-sidebar-additional_file
-    height: 270px
-    overflow-y: auto
-
-    .col--size
-      width: 80px
-    .col--operation
-      width: 60px
-      text-align: center

packages/ui-default/pages/problem_files.page.styl

@@ -1,17 +0,0 @@
-.page--problem_files
-  .col--checkbox
-    width: 60px
-
-  .col--size
-    width: 120px
-
-  .col--operation
-    width: 60px
-    text-align: center
-
-  .rename-confirm-table
-    x-overflow: auto
-
-    .col--origin, .col--new
-      width: 50%
-      text-align: center

packages/ui-default/pages/problem_files.page.tsx

@@ -1,324 +1,35 @@
 import { STATUS } from '@hydrooj/common';
 import $ from 'jquery';
-import { map } from 'lodash';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
 import FileSelectAutoComplete from 'vj/components/autocomplete/FileSelectAutoComplete';
-import { ActionDialog, confirm, InfoDialog } from 'vj/components/dialog/index';
+import { InfoDialog } from 'vj/components/dialog/index';
 import createHint from 'vj/components/hint';
 import Notification from 'vj/components/notification';
 import { previewFile } from 'vj/components/preview/preview.page';
-import uploadFiles from 'vj/components/upload';
 import download from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
 import {
   i18n, pjax, request, tpl,
 } from 'vj/utils';
 
-async function downloadProblemFilesAsArchive(type, files) {
-  const { links, pdoc } = await request.post('', { operation: 'get_links', files, type });
-  const targets = [];
-  for (const filename of Object.keys(links)) targets.push({ filename, url: links[filename] });
-  await download(`${pdoc.docId} ${pdoc.title}.zip`, targets);
+function ensureAndGetSelectedFiles(type = '') {
+  const allChecked = $(`.files tbody [data-checkbox-group="${type}"]:checked`);
+  const files = allChecked.get().map((i) => $(i).closest('tr').attr('data-filename'));
+  if (files.length === 0) {
+    Notification.error(i18n('Please select at least one file to perform this operation.'));
+    return null;
+  }
+  return files;
 }
 
 const page = new NamedPage('problem_files', () => {
-  function ensureAndGetSelectedFiles(type) {
-    const files = map(
-      $(`.problem-files-${type} tbody [data-checkbox-group="${type}"]:checked`),
-      (ch) => $(ch).closest('tr').attr('data-filename'),
-    );
-    if (files.length === 0) {
-      Notification.error(i18n('Please select at least one file to perform this operation.'));
-      return null;
-    }
-    return files;
-  }
-
-  async function handleClickUpload(type, files?) {
-    if (!files) {
-      const input = document.createElement('input');
-      input.type = 'file';
-      input.multiple = true;
-      input.click();
-      await new Promise((resolve) => { input.onchange = resolve; });
-      files = input.files;
-    }
-    if (!files.length) {
-      Notification.warn(i18n('No file selected.'));
-      return;
-    }
-    await uploadFiles('', files, { type, pjax: true });
-  }
-
-  async function handleClickDownloadSelected(type) {
-    const selectedFiles = ensureAndGetSelectedFiles(type);
-    if (selectedFiles === null) return;
-    await downloadProblemFilesAsArchive(type, selectedFiles);
-  }
-
-  async function handleClickRename(ev, type) {
-    const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
-    // eslint-disable-next-line no-alert
-    const newName = prompt(i18n('Enter a new name for the file: '));
-    if (!newName) return;
-    try {
-      await request.post('./files', {
-        operation: 'rename_files',
-        files: file,
-        newNames: [newName],
-        type,
-      });
-      Notification.success(i18n('File have been renamed.'));
-      await pjax.request({ push: false });
-    } catch (error) {
-      Notification.error(error.message);
-    }
-  }
-
-  let prism = null;
-  const load = import('../components/highlighter/prismjs');
-  load.then(({ default: p }) => {
-    prism = p.Prism;
-  }).catch(() => { });
-
-  async function handleClickRenameSelected(type) {
-    const selectedFiles = ensureAndGetSelectedFiles(type);
-    if (!selectedFiles?.length) return;
-    let onActionButton = (_: string) => false;
-
-    function Rename(props) {
-      const [original, setOriginal] = React.useState('');
-      const [replace, setReplace] = React.useState('');
-      const [prefix, setPrefix] = React.useState('');
-      const [suffix, setSuffix] = React.useState('');
-      const [regexValid, setRegexValid] = React.useState(true);
-      const [wantNext, setWantNext] = React.useState(false);
-      const [preview, setPreview] = React.useState(false);
-      const [highlight, setHighlight] = React.useState(null);
-      const [newNames, setNewNames] = React.useState(props.names);
-
-      React.useEffect(() => {
-        let s: string | RegExp = original;
-        setRegexValid(true);
-        setHighlight(null);
-        if (original.length > 2 && original.startsWith('/')) {
-          const availableFlags = ['g', 'i'];
-          const flags = [];
-          let copy = original.substring(1);
-          while (availableFlags.includes(copy[copy.length - 1])) {
-            flags.push(copy[copy.length - 1]);
-            copy = copy.substring(0, copy.length - 1);
-          }
-          if (copy.endsWith('/')) {
-            copy = copy.substring(0, copy.length - 1);
-            flags.reverse();
-            if (prism) setHighlight(`/${prism.highlight(copy, prism.languages.regex, 'RegExp')}/${flags.join('')}`);
-            try {
-              s = new RegExp(copy, flags.join(''));
-              setRegexValid(true);
-            } catch (e) {
-              setRegexValid(false);
-            }
-          }
-        }
-        setNewNames(selectedFiles.map((file) => {
-          if (s) file = file.replace(s, replace);
-          return prefix + file + suffix;
-        }));
-      }, [original, replace, prefix, suffix]);
-
-      onActionButton = (action) => {
-        if (action === 'ok') {
-          if (!preview) {
-            if (!regexValid) return false;
-            if (!original && !prefix && !suffix) {
-              setWantNext(true);
-              return false;
-            }
-            setPreview(true);
-            return false;
-          }
-          request.post('', {
-            operation: 'rename_files',
-            files: selectedFiles,
-            newNames,
-            type,
-          }).then(() => {
-            Notification.success(i18n('Selected files have been renamed.'));
-            pjax.request({ push: false });
-          }).catch((error) => {
-            Notification.error(error.message);
-          });
-          return true;
-        }
-        if (preview) {
-          setPreview(false);
-          return false;
-        }
-        return true;
-      };
-
-      const style = { fontFamily: 'var(--code-font-family)' };
-
-      return <div className="typo" style={{ maxHeight: '60vh', overflow: 'scroll' }}>
-        {!preview ? <>
-          <div className="row">
-            <div className="medium-6 small-6 columns">
-              <h2>{i18n('Batch replacement')}</h2>
-              <label>{i18n('Original content')}
-                <div style={{ position: 'relative' }}>
-                  <div className="textbox-container" style={{ zIndex: 1, position: 'relative' }}>
-                    <input
-                      className="textbox"
-                      type="text"
-                      style={{ ...style, ...(highlight ? { color: 'transparent', background: 'transparent', caretColor: 'black' } : {}) }}
-                      value={original}
-                      onChange={(e) => setOriginal(e.currentTarget.value)}
-                    />
-                  </div>
-                  <div
-                    className="textbox-container"
-                    style={{
-                      position: 'absolute', top: 0, left: 0, zIndex: 0,
-                    }}
-                  >
-                    {highlight && <span
-                      className="textbox"
-                      style={{
-                        ...style, border: 'none', display: 'inline-flex', alignItems: 'center',
-                      }}
-                      dangerouslySetInnerHTML={{ __html: highlight }}
-                    />}
-                  </div>
-                </div>
-              </label>
-              <label>{i18n('Replace with')}
-                <div className="textbox-container">
-                  <input className="textbox" type="text" value={replace} onChange={(e) => setReplace(e.currentTarget.value)}></input>
-                </div>
-              </label>
-            </div>
-            <div className="medium-6 small-6 columns">
-              <h2>{i18n('Add prefix/suffix')}</h2>
-              <label>{i18n('Add prefix')}
-                <div className="textbox-container">
-                  <input className="textbox" type="text" value={prefix} onChange={(e) => setPrefix(e.currentTarget.value)}></input>
-                </div>
-              </label>
-              <label>{i18n('Add suffix')}
-                <div className="textbox-container">
-                  <input className="textbox" type="text" value={suffix} onChange={(e) => setSuffix(e.currentTarget.value)}></input>
-                </div>
-              </label>
-            </div>
-          </div>
-          <div className="row">
-            <div className="medium-12 columns">
-              <p>{!regexValid ? i18n('Invalid RegExp') : wantNext ? i18n('No changes to make.') : i18n('RegExp supported, quote with "/"')}</p>
-            </div>
-          </div>
-        </> : <div>
-          <p>{i18n('Are you sure to rename the following file?')}</p>
-          <ul>
-            {original && <li>Replace {original} with {replace}</li>}
-            {prefix && <li>Add {prefix} as prefix</li>}
-            {suffix && <li>Add {suffix} as suffix</li>}
-          </ul>
-          <table className="data-table rename-confirm-table">
-            <colgroup>
-              <col className="col--origin" />
-              <col className="col--new" />
-            </colgroup>
-            <thead>
-              <tr>
-                <th className="col--origin">{i18n('Original filename(s)')}</th>
-                <th className="col--new">{i18n('New filename(s)')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {selectedFiles.map((file, index) => <tr key={file}>
-                <td className="col--origin">{file}</td>
-                <td className="col--new">{newNames[index]}</td>
-              </tr>)}
-            </tbody>
-          </table>
-        </div>}
-      </div>;
-    }
-
-    const promise = new ActionDialog({
-      $body: tpl`<div id="rename_dialog"></div>`,
-      width: '600px',
-      onDispatch(action) {
-        return onActionButton(action);
-      },
-    }).open();
-    const root = ReactDOM.createRoot(document.getElementById('rename_dialog'));
-    root.render(<Rename names={selectedFiles} />);
-    await promise;
-    root.unmount();
-  }
-
-  async function handleClickRemove(ev, type) {
-    const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
-    if (!(await confirm(i18n('Confirm to delete the file?')))) return;
-    try {
-      await request.post('./files', {
-        operation: 'delete_files',
-        files: file,
-        type,
-      });
-      Notification.success(i18n('File have been deleted.'));
-      await pjax.request({ push: false });
-    } catch (error) {
-      Notification.error(error.message);
-    }
-  }
-
-  async function handleClickRemoveSelected(type) {
-    const selectedFiles = ensureAndGetSelectedFiles(type);
-    if (selectedFiles === null) return;
-    if (!(await confirm(i18n('Confirm to delete the selected files?')))) return;
-    try {
-      await request.post('', {
-        operation: 'delete_files',
-        files: selectedFiles,
-        type,
-      });
-      Notification.success(i18n('Selected files have been deleted.'));
-      await pjax.request({ push: false });
-    } catch (error) {
-      Notification.error(error.message);
-    }
-  }
-
-  function handleDragOver(type: string, ev: JQuery.DragOverEvent<Document, undefined, HTMLElement, HTMLElement>) {
-    ev.preventDefault();
-    // TODO display a drag-drop allowed hint
-  }
-
-  function handleDrop(type: string, e: JQuery.DropEvent<Document, undefined, HTMLElement, HTMLElement>) {
-    e.preventDefault();
-    if (!$('[name="upload_testdata"]').length) {
-      Notification.error(i18n("You don't have permission to upload file."));
-      return;
-    }
-    const ev = e.originalEvent;
-    const files = [];
-    if (ev.dataTransfer.items) {
-      for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-        if (ev.dataTransfer.items[i].kind === 'file') {
-          const file = ev.dataTransfer.items[i].getAsFile();
-          files.push(file);
-        }
-      }
-    } else {
-      for (let i = 0; i < ev.dataTransfer.files.length; i++) {
-        files.push(ev.dataTransfer.files[i]);
-      }
-    }
-    handleClickUpload(type, files);
+  async function handleClickDownloadSelected(ev) {
+    const type = $(ev.currentTarget).closest('[data-type]').attr('data-type');
+    const files = ensureAndGetSelectedFiles(type);
+    if (files === null) return;
+    const { links, pdoc } = await request.post('', { operation: 'get_links', files, type });
+    const targets = [];
+    for (const filename of Object.keys(links)) targets.push({ filename, url: links[filename] });
+    await download(`${pdoc.docId} ${pdoc.title} ${type}.zip`, targets);
   }
 
   async function handleGenerateTestdata(ev) {
@@ -372,27 +83,9 @@ const page = new NamedPage('problem_files', () => {
     FileSelectAutoComplete.getOrConstruct($('[name=std]'), { data: UiContext.pdoc.data });
     $('[name="generate_testdata"]').on('click', handleGenerateTestdata);
   }
-
-  if ($('[name="upload_testdata"]').length) {
-    $(document).on('click', '[name="upload_testdata"]', () => handleClickUpload('testdata'));
-    $(document).on('click', '[name="upload_file"]', () => handleClickUpload('additional_file'));
-    $(document).on('click', '[name="create_testdata"]', () => previewFile(undefined, 'testdata'));
-    $(document).on('click', '[name="create_file"]', () => previewFile(undefined, 'additional_file'));
-    $(document).on('click', '[name="testdata__rename"]', (ev) => handleClickRename(ev, 'testdata'));
-    $(document).on('click', '[name="additional_file__rename"]', (ev) => handleClickRename(ev, 'additional_file'));
-    $(document).on('click', '[name="rename_selected_testdata"]', () => handleClickRenameSelected('testdata'));
-    $(document).on('click', '[name="rename_selected_file"]', () => handleClickRenameSelected('additional_file'));
-    $(document).on('click', '[name="testdata__delete"]', (ev) => handleClickRemove(ev, 'testdata'));
-    $(document).on('click', '[name="additional_file__delete"]', (ev) => handleClickRemove(ev, 'additional_file'));
-    $(document).on('click', '[name="remove_selected_testdata"]', () => handleClickRemoveSelected('testdata'));
-    $(document).on('click', '[name="remove_selected_file"]', () => handleClickRemoveSelected('additional_file'));
-  }
-  $(document).on('dragover', '.problem-files-testdata', (ev) => handleDragOver('testdata', ev));
-  $(document).on('dragover', '.problem-files-additional_file', (ev) => handleDragOver('additional_file', ev));
-  $(document).on('drop', '.problem-files-testdata', (ev) => handleDrop('testdata', ev));
-  $(document).on('drop', '.problem-files-additional_file', (ev) => handleDrop('additional_file', ev));
-  $(document).on('click', '[name="download_selected_testdata"]', () => handleClickDownloadSelected('testdata'));
-  $(document).on('click', '[name="download_selected_file"]', () => handleClickDownloadSelected('additional_file'));
+  $(document).on('click', '[name="create_testdata"]', () => previewFile(undefined, 'testdata'));
+  $(document).on('click', '[name="create_file"]', () => previewFile(undefined, 'additional_file'));
+  $(document).on('click', '[name="download_selected"]', (ev) => handleClickDownloadSelected(ev));
   $(document).on('vjContentNew', (e) => {
     createHint('Hint::icon::testdata', $(e.target).find('[name="create_testdata"]').get(0)?.parentNode?.parentNode?.children?.[0]);
   });

packages/ui-default/templates/contest_clarification.html

@@ -0,0 +1,103 @@
+{% extends "layout/basic.html" %}
+{% import "components/contest.html" as contest with context %}
+{% import "components/problem.html" as problem with context %}
+{% block content %}
+{{ set(UiContext, 'tdoc', tdoc) }}
+<div class="row">
+  <div class="medium-9 columns">
+    <div class="section">
+      <div class="section__header">
+        <h1 class="section__title">{{ _('Contest Clarifications') }}</h1>
+        <div class="section__tools">
+          <a href="#reply_or_broadcast" class="primary rounded button" name="broadcast" data-title="{{ _('Send Broadcast Message') }}" data-did="">{{ _('Send Broadcast Message') }}</a>
+        </div>
+      </div>
+      <div class="section__body">
+      {% if not tcdocs.length %}
+        {{ nothing.render('Oh, there is no clarification!', compact=true) }}
+      {% else %}
+      <ul class="dczcomments__list">
+        {% for doc in tcdocs %}
+        <li class="dczcomments__item" id="clarification_{{ doc._id }}" data-did="{{ doc._id }}">
+          <div class="media">
+            <div class="media__body top" style="max-width:100%">
+              <div class="clearfix">
+                <div class="supplementary dczcomments__supplementary">
+                  {{_('Subject') }}: {{ contest.render_clarification_subject(tdoc,pdict,doc.subject) }} | {% if doc.owner == 0 %}<b>{{ _('Jury') }}</b>{% else %}{{ user.render_inline(udict[doc.owner], badge=false) }}{% endif %} @ {{ datetimeSpan(doc._id)|safe }}
+                </div>
+                {% if doc.owner %}
+                <div class="dczcomments__operations nojs--hide">
+                  <a href="#reply_or_broadcast" name="reply" data-title="{{ _('Reply') }}#{{ doc._id }}" data-did="{{ doc._id }}"
+                  ><span class="icon icon-reply"></span>{{ _('Reply') }}</a>
+                </div>
+                {% endif %}
+              </div>
+              <div class="typo richmedia" data-emoji-enabled>
+                {{ doc['content']|markdown|safe }}
+              </div>
+            </div>
+          </div>
+          <ul class="dczcomments__replies">
+          {%- for rdoc in doc['reply'] -%}
+            <li class="dczcomments__reply">
+              <div class="media">
+                <div class="media__left top">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
+                <div class="media__body top">
+                  <div class="clearfix">
+                    <div class="supplementary dczcomments__supplementary">
+                      <b>{{ _('Jury') }}</b>
+                    </div>
+                  </div>
+                  <div class="typo richmedia" data-emoji-enabled>
+                    {{ rdoc['content']|markdown|safe }}
+                  </div>
+                </div>
+              </div>
+            </li>
+          {%- endfor -%}
+          </ul>
+        </li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+      </div>
+      <div id="reply_or_broadcast">
+        <div class="section__header">
+          <h1 class="section__title">{{ _('Send Broadcast Message') }}</h1>
+        </div>
+        <div class="section__body typo">
+          <form method="post">
+            <div class="clarification-container"></div>
+            <input type="hidden" name="operation" value="clarification">
+            <input type="hidden" name="did" value="">
+            <div class="row">
+              <div class="medium-12 columns form__item_subject">
+                <label>
+                  {{ _('Subject') }}
+                  <select name="subject" class="select">
+                    <option value="0">{{ _('General Issue') }}</option>
+                    <option value="-1">{{ _('Technical Issue') }}</option>
+                    {% for pid in tdoc.pids %}
+                    <option value="{{ pid }}">{{ utils.getAlphabeticId(loop.index0) }}. {{ pdict[pid].title }}</option>
+                    {% endfor %}
+                  </select>
+                </label>
+              </div>
+              <div class="medium-12 columns form__item">
+                <label>
+                  {{ _('Content') }}
+                  <textarea name="content" class="textbox" data-markdown required></textarea>
+                </label>
+              </div>
+            </div>
+            <button type="submit" class="rounded primary button">{{ _('Submit') }}</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="medium-3 columns">
+    {% include 'partials/contest_sidebar_management.html' %}
+  </div>
+</div>
+{% endblock %}

packages/ui-default/templates/contest_detail.html

@@ -38,11 +38,12 @@
       {% endif %}
       </div>
     </div>
-    {% if tdoc.files.length %}
+    {% if files.length %}
       <div class="section">
         <div class="section__header">
           <h1 class="section__title">{{ _('Files') }}</h1>
         </div>
+        {% set filetype = 'private' %}
         {% include "partials/files.html" %}
       </div>
     {% endif %}

packages/ui-default/templates/contest_edit.html

@@ -228,6 +228,20 @@
     </div>
   </div>
   <div class="medium-3 columns">
+    {% if tdoc %}
+    <div class="section side">
+      <div class="section__header">
+        <h1 class="section__title">{{ _('Files') }}</h1>
+        <div class="section__tools">
+          <button class="primary rounded button" name="upload_file">{{ _('Upload') }}</button>
+        </div>
+      </div>
+      {% set sidebar = true %}
+      {% set files = tdoc.files %}
+      {% set filetype = "public" %}
+      {% include "partials/files.html" %}
+    </div>
+    {% endif %}
     {% include 'components/md_hint.html' %}
   </div>
 </div>

packages/ui-default/templates/contest_manage.html

@@ -5,142 +5,69 @@
 {{ set(UiContext, 'tdoc', tdoc) }}
 <div class="row">
   <div class="medium-9 columns">
-    <div class="row">
-      <div class="medium-7 columns">
-        <div class="section">
-          <div class="section__body no-padding">
-            <table class="data-table">
-              <colgroup>
-                <col class="col--problem">
-                <col class="col--score">
-              </colgroup>
-              <thead>
-                <tr>
-                  <th class="col--problem">{{ _('Problem') }}</th>
-                  <th class="col--score">{{ _('Score') }}</th>
-                </tr>
-              </thead>
-              <tbody>
-              {%- for pid in tdoc.pids -%}
-                <tr>
-                  <td class="col--problem col--problem-name">
-                    <a href="{{ url('problem_detail', pid=pid) }}">
-                      {{ problem.render_problem_title(pdict[pid], tdoc=tdoc, invalid=true, alphabetic=true) }}
-                    </a>
-                  </td>
-                  <td class="col--score">
-                    <a class="typo-a" data-tooltip="{{ _('Set Score for Contest') }}" name="set_score" data-pid="{{ pid }}" data-score="{{ tdoc.score[pid]|default(100) }}">{{ tdoc.score[pid]|default(100) }}</a>
-                  </td>
-                </tr>
-              {%- endfor -%}
-              </tbody>
-            </table>
-          </div>
-        </div>
+    <div class="section">
+      <div class="section__body no-padding">
+        <table class="data-table">
+          <colgroup>
+            <col class="col--id">
+            <col class="col--problem">
+            <col class="col--score">
+          </colgroup>
+          <thead>
+            <tr>
+              <th class="col--id">{{ _('ID') }}</th>
+              <th class="col--problem">{{ _('Problem') }}</th>
+              <th class="col--score">{{ _('Score') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+          {%- for pid in tdoc.pids -%}
+            <tr>
+              <td class="col--id">{{ pdict[pid].docId }}</td>
+              <td class="col--problem col--problem-name">
+                <a href="{{ url('problem_detail', pid=pid) }}">
+                  {{ problem.render_problem_title(pdict[pid], tdoc=tdoc, invalid=true, alphabetic=true) }}
+                </a>
+              </td>
+              <td class="col--score">
+                <a class="typo-a" data-tooltip="{{ _('Set Score for Contest') }}" name="set_score" data-pid="{{ pid }}" data-score="{{ tdoc.score[pid]|default(100) }}">{{ tdoc.score[pid]|default(100) }}</a>
+              </td>
+            </tr>
+          {%- endfor -%}
+          </tbody>
+        </table>
       </div>
-      <div class="medium-5 columns">
-        <div class="section">
+    </div>
+    <div class="row">
+      <div class="medium-6 columns">
+        <div class="section" data-type="public">
           <div class="section__header">
-            <h1 class="section__title">{{ _('Files') }}</h1>
+            <h1 class="section__title">{{ _('Files') }}({{ _('Public') }})</h1>
             <div class="section__tools">
               <button class="primary rounded button" name="upload_file">{{ _('Upload File') }}</button>
             </div>
           </div>
           {{ noscript_note.render() }}
+          {% set filetype = "public" %}
           {% include "partials/files.html" %}
           <div class="section__body">
             <button class="rounded button" name="remove_selected">{{ _('Remove Selected') }}</button>
           </div>
         </div>
       </div>
-      <div class="medium-12 columns">
-        <div class="section">
+      <div class="medium-6 columns">
+        <div class="section" data-type="private">
           <div class="section__header">
-            <h1 class="section__title">{{ _('Contest Clarifications') }}</h1>
+            <h1 class="section__title">{{ _('Materials') }}({{ _('Only Partic.') }})</h1>
             <div class="section__tools">
-              <a href="#reply_or_broadcast" class="primary rounded button" name="broadcast" data-title="{{ _('Send Broadcast Message') }}" data-did="">{{ _('Send Broadcast Message') }}</a>
+              <button class="primary rounded button" name="upload_file">{{ _('Upload File') }}</button>
             </div>
           </div>
+          {% set files = tdoc.privateFiles %}
+          {% set filetype = "private" %}
+          {% include "partials/files.html" %}
           <div class="section__body">
-          {% if not tcdocs.length %}
-            {{ nothing.render('Oh, there is no clarification!') }}
-          {% else %}
-          <ul class="dczcomments__list">
-            {% for doc in tcdocs %}
-            <li class="dczcomments__item" id="clarification_{{ doc._id }}" data-did="{{ doc._id }}">
-              <div class="media">
-                <div class="media__body top" style="max-width:100%">
-                  <div class="clearfix">
-                    <div class="supplementary dczcomments__supplementary">
-                      {{_('Subject') }}: {{ contest.render_clarification_subject(tdoc,pdict,doc.subject) }} | {% if doc.owner == 0 %}<b>{{ _('Jury') }}</b>{% else %}{{ user.render_inline(udict[doc.owner], badge=false) }}{% endif %} @ {{ datetimeSpan(doc._id)|safe }}
-                    </div>
-                    {% if doc.owner %}
-                    <div class="dczcomments__operations nojs--hide">
-                      <a href="#reply_or_broadcast" name="reply" data-title="{{ _('Reply') }}#{{ doc._id }}" data-did="{{ doc._id }}"
-                      ><span class="icon icon-reply"></span>{{ _('Reply') }}</a>
-                    </div>
-                    {% endif %}
-                  </div>
-                  <div class="typo richmedia" data-emoji-enabled>
-                    {{ doc['content']|markdown|safe }}
-                  </div>
-                </div>
-              </div>
-              <ul class="dczcomments__replies">
-              {%- for rdoc in doc['reply'] -%}
-                <li class="dczcomments__reply">
-                  <div class="media">
-                    <div class="media__left top">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
-                    <div class="media__body top">
-                      <div class="clearfix">
-                        <div class="supplementary dczcomments__supplementary">
-                          <b>{{ _('Jury') }}</b>
-                        </div>
-                      </div>
-                      <div class="typo richmedia" data-emoji-enabled>
-                        {{ rdoc['content']|markdown|safe }}
-                      </div>
-                    </div>
-                  </div>
-                </li>
-              {%- endfor -%}
-              </ul>
-            </li>
-            {% endfor %}
-          </ul>
-          {% endif %}
-          </div>
-          <div id="reply_or_broadcast">
-            <div class="section__header">
-              <h1 class="section__title">{{ _('Send Broadcast Message') }}</h1>
-            </div>
-            <div class="section__body typo">
-              <form method="post">
-                <div class="clarification-container"></div>
-                <input type="hidden" name="operation" value="clarification">
-                <input type="hidden" name="did" value="">
-                <div class="row">
-                  <div class="medium-12 columns form__item_subject">
-                    <label>
-                      {{ _('Subject') }}
-                      <select name="subject" class="select">
-                        <option value="0">{{ _('General Issue') }}</option>
-                        <option value="-1">{{ _('Technical Issue') }}</option>
-                        {% for pid in tdoc.pids %}
-                        <option value="{{ pid }}">{{ utils.getAlphabeticId(loop.index0) }}. {{ pdict[pid].title }}</option>
-                        {% endfor %}
-                      </select>
-                    </label>
-                  </div>
-                  <div class="medium-12 columns form__item">
-                    <label>
-                      {{ _('Content') }}
-                      <textarea name="content" class="textbox" data-markdown required></textarea>
-                    </label>
-                  </div>
-                </div>
-                <button type="submit" class="rounded primary button">{{ _('Submit') }}</button>
-            </div>
+            <button class="rounded button" name="remove_selected">{{ _('Remove Selected') }}</button>
           </div>
         </div>
       </div>

packages/ui-default/templates/contest_problemlist.html

@@ -87,9 +87,9 @@
       </div>
       <div class="section__body no-padding">
       {% if not canViewRecord %}
-        {{ nothing.render('According to the contest rules, you cannot view your submission details at current.') }}
+        {{ nothing.render('According to the contest rules, you cannot view your submission details at current.', compact=true) }}
       {% elif not rdocs.length %}
-        {{ nothing.render('Oh, there is no submission!') }}
+        {{ nothing.render('Oh, there is no submission!', compact=true) }}
       {% else %}
         <table class="data-table record_main__table">
           <colgroup>
@@ -129,7 +129,7 @@
       </div>
       <div class="section__body">
       {% if not tcdocs.length %}
-        {{ nothing.render('Oh, there is no clarification!') }}
+        {{ nothing.render('Oh, there is no clarification!', compact=true) }}
       {% else %}
       <ul class="dczcomments__list">
         {% for doc in tcdocs %}
@@ -203,6 +203,20 @@
     </div>
   </div>
   <div class="medium-3 columns" data-sticky="large">
+    {% if tdoc.privateFiles.length %}
+    <div class="section side">
+      <div class="section__header">
+        <h1 class="section__title">{{_('Materials')}}</h1>
+      </div>
+      <ol>
+        {% for file in tdoc.privateFiles %}
+        <li class="menu__item">
+          <a class="menu__link" href="{{ url('contest_file_download', { tid: tdoc.docId, filename: file.name, type: 'private' }) }}">{{ file.name }}</a>
+        </li>
+        {% endfor %}
+      </ol>
+    </div>
+    {% endif %}
     {% set owner_udoc = udict[tdoc.owner] %}
     {% include "partials/contest_sidebar.html" %}
   </div>

packages/ui-default/templates/partials/contest_sidebar_management.html

@@ -29,6 +29,9 @@
       <li class="menu__item"><a class="menu__link" href="{{ url('contest_balloon', tid=tdoc.docId) }}">
         <span class="icon icon-balloon"></span> {{ _('Balloon Status') }}
       </a></li>
+      <li class="menu__item"><a class="menu__link" href="{{ url('contest_clarification', tid=tdoc.docId) }}">
+        <span class="icon icon-comment--text"></span> {{ _('Contest Clarifications') }}
+      </a></li>
       <li class="menu__seperator"></li>
     </ol>
   </div>

packages/ui-default/templates/partials/files.html

@@ -1,44 +1,49 @@
 {% import "components/nothing.html" as nothing with context %}
-<div class="section__body no-padding files" data-fragment-id="files">
+<div class="section__body no-padding files" {% if filetype %}data-type="{{ filetype }}"{% endif %} data-fragment-id="files{% if filetype %}-{{ filetype }}{% endif %}">
   {% if files.length %}
     <table class="data-table">
       <colgroup>
-        <col class="col--checkbox">
+        {% if not sidebar %}<col class="col--checkbox">{% endif %}
         <col class="col--name">
         <col class="col--size">
+        <col class="col--operation">
       </colgroup>
       <thead>
         <tr>
+          {% if not sidebar %}
           <th class="col--checkbox">
             <label class="compact checkbox">
-              <input type="checkbox" name="select_all" data-checkbox-toggle="files">
+              <input type="checkbox" name="select_all" data-checkbox-toggle="{{ filetype|default('files') }}">
             </label>
           </th>
+          {% endif %}
           <th class="col--name">{{ _('Filename') }}</th>
           <th class="col--size">{{ _('Size') }}</th>
-          <th class="col--operation"></th>
+          <th class="col--operation"><span class="icon icon-wrench"></span></th>
         </tr>
       </thead>
       <tbody>
         {%- for file in files -%}
         <tr data-filename="{{ file.name }}" data-size="{{ file.size }}">
+          {% if not sidebar %}
           <td class="col--checkbox">
             <label class="compact checkbox">
-              <input type="checkbox" data-checkbox-group="files" data-checkbox-range>
+              <input type="checkbox" data-checkbox-group="{{ filetype|default('files') }}" data-checkbox-range>
             </label>
           </td>
+          {% endif %}
           <td class="col--name" data-preview>
-            <a href="{{ urlForFile(file.name) }}">{{ file.name }}</a>
+            <a href="{{ urlForFile(file.name, filetype) }}">{{ file.name }}</a>
           </td>
           <td class="col--size">{{ size(file.size) }}</td>
           <td class="col--operation">
-            <a href="{{ urlForFile(file.name) }}" class="icon icon-download"></a>
+            <a href="{{ urlForFile(file.name, filetype) }}" class="icon icon-download"></a>
           </td>
         </tr>
         {%- endfor -%}
       </tbody>
     </table>
   {% else %}
-    {{ nothing.render('There are no files currently.') }}
+    {{ nothing.render('There are no files currently.', compact=true) }}
   {% endif %}
 </div>

packages/ui-default/templates/partials/problem_files.html

@@ -1,7 +1,7 @@
 {% import "components/nothing.html" as nothing with context %}
 {% set _files = testdata if filetype == 'testdata' else additional_file %}
-<div class="section__body no-padding problem-{{ 'sidebar' if sidebar else 'files' }}-{{ filetype }}" data-fragment-id="problem-files-{{ filetype }}" 
-  {% if sidebar %}data-type="{{ filetype }}" data-sidebar{% endif %}>
+<div class="section__body files no-padding problem-{{ 'sidebar' if sidebar else 'files' }}-{{ filetype }}" data-fragment-id="problem-files-{{ filetype }}" 
+  data-type="{{ filetype }}" {% if sidebar %}data-sidebar{% endif %}>
   {% if reference %}
     <blockquote class="note">
       <p>{{ _('This is a copy of another problem.') }}</p>
@@ -49,8 +49,8 @@
           <td class="col--size">{{ size(file.size) }}</td>
           {% if can_edit %}
           <td class="col--operation">
-            <a href="javascript:;" name="{{ filetype }}__rename"><span class="icon icon-edit"></span></a>
-            <a href="javascript:;" name="{{ filetype }}__delete"><span class="icon icon-delete"></span></a>
+            <a href="javascript:;" name="file_rename"><span class="icon icon-edit"></span></a>
+            <a href="javascript:;" name="file_remove"><span class="icon icon-delete"></span></a>
           </td>
           {% endif %}
         </tr>

packages/ui-default/templates/problem_edit.html

@@ -92,20 +92,13 @@
       </div>
     </div>
     {% if page_name == 'problem_edit' %}
-      <div class="section side">
+      <div class="section side" data-type="additional_file" data-sidebar>
         <div class="section__header">
-          <h1 class="section__title">{{ additional_file.length|default(0) }} {{_('Additional File')}}</h1>
+          <h1 class="section__title">{{_('Additional Files')}}</h1>
+          <div class="section__tools">
+            <button class="primary rounded button" name="upload_file">{{ _('Upload') }}</button>
+          </div>
         </div>
-        <ol class="menu">
-          <li class="menu__item flex-row">
-            <a class="menu__link half" href="javascript:;" name="additional_file__upload">
-              <span class="icon icon-upload"></span> {{ _('Upload') }}
-            </a>
-            <a class="menu__link half" href="javascript:;" name="additional_file__download">
-              <span class="icon icon-download"></span> {{ _('Download All') }}
-            </a>
-          </li>
-        </ol>
         {% set sidebar = true %}
         {% set can_edit = true %}
         {% set filetype = "additional_file" %}

packages/ui-default/templates/problem_files.html

@@ -2,7 +2,7 @@
 {% extends "layout/basic.html" %}
 {% block content %}
 <div class="row">
-  <div class="medium-5 columns">
+  <div class="medium-5 columns" data-type="testdata">
     <div class="section">
       <div class="section__header">
         <h1 class="section__title">{{ _('Testdata') }}</h1>
@@ -10,7 +10,7 @@
           {% if not reference and (handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM)) %}
             <a href="{{ url('problem_config', pid=pdoc.docId) }}" class="primary rounded button">{{ _('Config') }}</a>
             <button class="primary rounded button" name="create_testdata">{{ _('Create') }}</button>
-            <button class="primary rounded button" name="upload_testdata">{{ _('Upload') }}</button>
+            <button class="primary rounded button" name="upload_file">{{ _('Upload') }}</button>
           {% elif reference %}
             <a href="{{ url('problem_detail', domainId=pdoc.reference.domainId, pid=pdoc.reference.pid) }}" class="primary rounded button">{{ _('Source') }}</a>
           {% endif %}
@@ -22,10 +22,10 @@
       {% include "partials/problem_files.html" %}
       {% if not reference and (handler.user.own(pdoc) or handler.user.hasPerm(perm.PERM_READ_PROBLEM_DATA) or handler.user.hasPriv(PRIV.PRIV_READ_PROBLEM_DATA)) %}
         <div class="section__body">
-          <button class="rounded button" name="download_selected_testdata">{{ _('Download Selected') }}</button>
+          <button class="rounded button" name="download_selected">{{ _('Download Selected') }}</button>
           {% if handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
-            <button class="rounded button" name="remove_selected_testdata">{{ _('Remove Selected') }}</button>
-            <button class="rounded button" name="rename_selected_testdata">{{ _('Rename Selected') }}</button>
+            <button class="rounded button" name="remove_selected">{{ _('Remove Selected') }}</button>
+            <button class="rounded button" name="rename_selected">{{ _('Rename Selected') }}</button>
           {% endif %}
         </div>
       {% endif %}
@@ -61,14 +61,14 @@
     </div>
     {% endif %}
   </div>
-  <div class="medium-4 columns">
+  <div class="medium-4 columns" data-type="additional_file">
     <div class="section">
       <div class="section__header">
-        <h1 class="section__title">{{ _('Files') }}</h1>
+        <h1 class="section__title">{{ _('Additional Files') }}</h1>
         <div class="section__tools">
           {% if (handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM)) and not reference %}
-            <button class="primary rounded button" name="create_file">{{ _('Create File') }}</button>
-            <button class="primary rounded button" name="upload_file">{{ _('Upload File') }}</button>
+            <button class="primary rounded button" name="create_file">{{ _('Create') }}</button>
+            <button class="primary rounded button" name="upload_file">{{ _('Upload') }}</button>
           {% endif %}
         </div>
       </div>
@@ -76,10 +76,10 @@
       {% set can_edit = (handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM)) and not reference %}
       {% include "partials/problem_files.html" %}
       <div class="section__body">
-        <button class="rounded button" name="download_selected_file">{{ _('Download Selected') }}</button>
+        <button class="rounded button" name="download_selected">{{ _('Download Selected') }}</button>
         {% if (handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM)) and not reference %}
-          <button class="rounded button" name="remove_selected_file">{{ _('Remove Selected') }}</button>
-          <button class="rounded button" name="rename_selected_file">{{ _('Rename Selected') }}</button>
+          <button class="rounded button" name="remove_selected">{{ _('Remove Selected') }}</button>
+          <button class="rounded button" name="rename_selected">{{ _('Rename Selected') }}</button>
         {% endif %}
       </div>
     </div>