core&ui: add problem_config

Co-authored-by: undefined <i@undefined.moe>

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

@@ -0,0 +1,23 @@
+.page--problem_config
+  .section--problem-sidebar-testdata
+    .problem-sidebar-testdata__detail
+      height: 270px
+      overflow-y: auto
+    
+    &.collapsed .collapsed--hidden,
+    &.expanded .expanded--hidden
+      display: none
+
+    &.collapsed .problem-sidebar-testdata__detail
+      display: none
+
+  .col--size
+    width: 80px
+  .col--operation
+    width: 40px
+
+  .textbox,.select
+    margin: 0
+  
+  .bp3-tab-panel
+    margin-top: 5px

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

@@ -0,0 +1,73 @@
+import { NamedPage } from 'vj/misc/Page';
+import { slideDown, slideUp } from 'vj/utils/slide';
+import request from 'vj/utils/request';
+import loadReactRedux from 'vj/utils/loadReactRedux';
+import i18n from 'vj/utils/i18n';
+import yaml from 'js-yaml';
+import Notification from 'vj/components/notification';
+
+async function handleSection(ev: JQuery.ClickEvent<Document, undefined, any, any>, type: string) {
+  const $section = $(ev.currentTarget).closest('.section--problem-sidebar-testdata');
+  if ($section.is(`.${type}d, .animating`)) return;
+  $section.addClass('animating');
+  const $detail = $section.find('.problem-sidebar-testdata__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');
+}
+
+const page = new NamedPage('problem_config', () => {
+  async function uploadConfig(config:object) {
+    const configYaml = yaml.dump(config);
+    Notification.info(i18n('Saving file...'));
+    const data = new FormData();
+    data.append('filename', 'config.yaml');
+    data.append('file', new Blob([configYaml], { type: 'text/plain' }));
+    data.append('type', 'testdata');
+    data.append('operation', 'upload_file');
+    await request.postFile('./files', data);
+    Notification.success(i18n('File saved.'));
+    window.location.reload();
+  }
+
+  async function mountComponent() {
+    const { default: ProblemConfigEditor } = await import('vj/components/problemconfig/ProblemConfigEditor');
+    const { default: ProblemConfigForm } = await import('vj/components/problemconfig/ProblemConfigForm');
+    const { default: ProblemConfigReducer } = await import('vj/components/problemconfig/reducer');
+
+    const {
+      React, render, Provider, store,
+    } = await loadReactRedux(ProblemConfigReducer);
+
+    store.dispatch({
+      type: 'CONFIG_LOAD',
+      payload: request.get(),
+    });
+    render(
+      <Provider store={store}>
+        <div className="row">
+          <div className="medium-5 columns">
+            <ProblemConfigEditor />
+          </div>
+          <div className="medium-7 columns">
+            <ProblemConfigForm />
+          </div>
+        </div>
+        <button className="rounded primary button" onClick={() => uploadConfig(store.getState().config)}>{i18n('Submit')}</button>
+      </Provider>,
+      $('#ProblemConfig').get(0),
+    );
+  }
+
+  mountComponent();
+
+  $(document).on('click', '[name="testdata__section__expand"]', (ev) => handleSection(ev, 'expand'));
+  $(document).on('click', '[name="testdata__section__collapse"]', (ev) => handleSection(ev, 'collapse'));
+});
+
+export default page;

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

@@ -7,6 +7,7 @@ import { ConfirmDialog } 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 { slideDown, slideUp } from 'vj/utils/slide';
 
 const categories = {};
 const dirtyCategories = [];
@@ -143,6 +144,21 @@ 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'], (pagename) => {
   let confirmed = false;
   $(document).on('click', '[name="operation"]', (ev) => {
@@ -232,4 +248,8 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
       ev.preventDefault();
     }
   });
+  $(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,4 +1,4 @@
-.page--problem_edit
+.page--problem_edit,.page--problem_create
   .section__tab-header-item
     border-top: 3px solid transparent;
     transition: border-color 0.2s, background 0.2s, color 0.2s;
@@ -10,4 +10,29 @@
       background: #f8f8f8;
     
     &.tab--active
-      border-color: #ed5f82;
+      border-color: #ed5f82;
+
+  .section--problem-sidebar-tags
+    &.collapsed .collapsed--hidden,
+    &.expanded .expanded--hidden
+      display: none
+
+    &.collapsed .problem-sidebar-tags__detail
+      display: none
+
+  .section--problem-sidebar-additional_file
+    .problem-sidebar-additional_file__detail
+      height: 270px
+      overflow-y: auto
+    
+    &.collapsed .collapsed--hidden,
+    &.expanded .expanded--hidden
+      display: none
+
+    &.collapsed .problem-sidebar-additional_file__detail
+      display: none
+
+    .col--size
+      width: 80px
+    .col--operation
+      width: 40px