ui: enhance problem_list

packages/ui-default/breakpoints.json

@@ -1,5 +1,5 @@
 {
   "mobile": 600,
   "desktop": 1000,
-  "hd": 1250
+  "hd": 1280
 }

packages/ui-default/components/star/star.page.js

@@ -14,7 +14,9 @@ const starPage = new AutoloadPage('starPage', () => {
     const $button = $(ev.currentTarget);
     const currentState = $button.hasClass('activated');
     const $form = $button.closest('form');
-    $form.find('[name="operation"]').val(currentState ? 'unstar' : 'star');
+    const $op = $form.find('[name="operation"]');
+    if (!['star', 'unstar'].includes($op.val())) return;
+    $op.val(currentState ? 'unstar' : 'star');
     setStarButtonState($button, !currentState);
     request
       .post($form.attr('action'), $form)
@@ -25,7 +27,6 @@ const starPage = new AutoloadPage('starPage', () => {
         // TODO: notify failure
         setStarButtonState($button, currentState);
       });
-    return false;
   });
 });
 

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.31.14",
+  "version": "4.31.15",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

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

@@ -0,0 +1,174 @@
+import _ from 'lodash';
+import Clipboard from 'clipboard';
+import { NamedPage } from 'vj/misc/Page';
+import Notification from 'vj/components/notification';
+import { ConfirmDialog, Dialog } from 'vj/components/dialog/index';
+import request from 'vj/utils/request';
+import pjax from 'vj/utils/pjax';
+import tpl from 'vj/utils/tpl';
+import i18n from 'vj/utils/i18n';
+
+function onBeforeUnload(e) {
+  e.returnValue = '';
+}
+
+function ensureAndGetSelectedFiles() {
+  const files = _.map(
+    $('.home-files tbody [data-checkbox-group="user_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;
+  }
+  const dialog = new Dialog({
+    $body: `
+      <div class="file-label" style="text-align: center; margin-bottom: 5px; color: gray; font-size: small;"></div>
+      <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
+        <div class="file-progress bp3-progress-meter" style="width: 0"></div>
+      </div>
+      <div class="upload-label" style="text-align: center; margin: 5px 0; color: gray; font-size: small;"></div>
+      <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
+        <div class="upload-progress bp3-progress-meter" style="width: 0"></div>
+      </div>`,
+  });
+  try {
+    Notification.info(i18n('Uploading files...'));
+    window.addEventListener('beforeunload', onBeforeUnload);
+    dialog.open();
+    const $uploadLabel = dialog.$dom.find('.dialog__body .upload-label');
+    const $uploadProgress = dialog.$dom.find('.dialog__body .upload-progress');
+    const $fileLabel = dialog.$dom.find('.dialog__body .file-label');
+    const $fileProgress = dialog.$dom.find('.dialog__body .file-progress');
+    for (const i in files) {
+      if (Number.isNaN(+i)) continue;
+      const file = files[i];
+      const data = new FormData();
+      data.append('filename', file.name);
+      data.append('file', file);
+      data.append('operation', 'upload_file');
+      await request.postFile('', data, {
+        xhr() {
+          const xhr = new XMLHttpRequest();
+          xhr.upload.addEventListener('loadstart', () => {
+            $fileLabel.text(`[${+i + 1}/${files.length}] ${file.name}`);
+            $fileProgress.width(`${Math.round((+i + 1) / files.length * 100)}%`);
+            $uploadLabel.text(i18n('Uploading... ({0}%)', 0));
+            $uploadProgress.width(0);
+          });
+          xhr.upload.addEventListener('progress', (e) => {
+            if (e.lengthComputable) {
+              const percentComplete = Math.round((e.loaded / e.total) * 100);
+              if (percentComplete === 100) $uploadLabel.text(i18n('Processing...'));
+              else $uploadLabel.text(i18n('Uploading... ({0}%)', percentComplete));
+              $uploadProgress.width(`${percentComplete}%`);
+            }
+          }, false);
+          return xhr;
+        },
+      });
+    }
+    window.removeEventListener('beforeunload', onBeforeUnload);
+    Notification.success(i18n('File uploaded successfully.'));
+    await pjax.request({ push: false });
+  } catch (e) {
+    console.error(e);
+    Notification.error(i18n('File upload failed: {0}', e.toString()));
+  } finally {
+    dialog.close();
+  }
+}
+
+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', () => {
+  const clip = new Clipboard('.home-files .col--name', {
+    text: (trigger) => {
+      const filename = trigger.closest('[data-filename]').getAttribute('data-filename');
+      return new URL(`/file/${UserContext._id}/${filename}`, window.location.href).toString();
+    },
+  });
+  clip.on('success', () => {
+    Notification.success(i18n('Download link copied to clipboard!'), 1000);
+  });
+  clip.on('error', () => {
+    Notification.error(i18n('Copy failed :('));
+  });
+  $(document).on('click', '.home-files .col--name', (ev) => ev.preventDefault());
+  $(document).on('click', '[name="upload_file"]', () => handleClickUpload());
+  $(document).on('click', '[name="remove_selected"]', () => handleClickRemoveSelected());
+  $(document).on('dragover', '.home-files', (ev) => handleDragOver(ev));
+  $(document).on('drop', '.home-files', (ev) => handleDrop(ev));
+});
+
+export default page;

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

@@ -9,15 +9,15 @@
   .col--status
     width: rem(140px)
     position: relative
+    border-right: 1px solid $table-border-color
 
-  .col--tried, .col--ac, .col--difficulty
+  .col--difficulty
     width: rem(70px)
     text-align: center
 
-  .col--status
-    border-right: 1px solid $table-border-color
-
-  .col--tried, .col--difficulty
+  .col--ac-tried
+    width: rem(100px)
+    text-align: center
     border-left: 1px solid $table-border-color
 
   +mobile()

packages/ui-default/templates/components/problem.html

@@ -5,24 +5,16 @@
   {% if pdoc.domainId !== handler.domainId %}{{ set(_linkArgs, 'domainId', pdoc.domainId) }}{% endif %}
   <a href="{{ url('problem_detail', _linkArgs) }}"{% if small %} data-tooltip="{{ pdoc.title }}"{% endif %}>
 {%- endif -%}
-{%- if pdoc.domainId !== handler.domainId -%}
-  {{ pdoc.domainId }}#
-{%- endif -%}
-{%- if pdoc.pid -%}
-  {{ pdoc.pid }}
-{%- else -%}
-  {{ 'P'+pdoc.docId if pdoc.domainId === handler.domainId else pdoc.docId }}
-{%- endif -%}
-{%- if not small -%}. {{ pdoc.title }}{%- endif -%}
+{%- if pdoc.domainId !== handler.domainId -%}{{ pdoc.domainId }}#{%- endif -%}
+<b>{{ pdoc.pid or 'P'+pdoc.docId if pdoc.domainId === handler.domainId else pdoc.docId }}</b>
+{%- if not small -%}&nbsp;&nbsp;{{ pdoc.title }}{%- endif -%}
 {%- if not invalid -%}
   </a>
 {%- endif -%}
 {%- if pdoc.hidden and show_invisible_flag -%}
   <span class="text-orange">({{ _('Hidden') }})</span>
 {%- endif -%}
-{%- if show_tags -%}
-  {{ render_problem_tags(pdoc, inline=inline) }}
-{%- endif -%}
+{%- if show_tags -%}{{ render_problem_tags(pdoc, inline=inline) }}{%- endif -%}
 {% endmacro %}
 
 {% macro render_problem_tags(pdoc, show_none_label=false, inline=false) %}
@@ -30,11 +22,9 @@
   {%- if not inline %}<ul class="problem__tags">{% endif -%}
   {%- for tag in pdoc['tag'] %}
     <li class="problem__tag"><a class="problem__tag-link" href="{{ url('problem_category', category=tag) }}">{{ tag }}</a></li>
-  {%- endfor %}
+  {%- endfor -%}
   {%- if not inline %}</ul>{% endif -%}
-{%- else %}
-  {%- if show_none_label %}
-    {{ _('(None)') }}
-  {%- endif %}
-{%- endif %}
+{%- else -%}
+  {%- if show_none_label -%}{{ _('(None)') }}{%- endif -%}
+{%- endif -%}
 {% endmacro %}

packages/ui-default/templates/components/record.html

@@ -1,13 +1,13 @@
-{% macro render_status_td(rdoc, rid_key='_id', class='', allDomain = false) %}
+{% macro render_status_td(rdoc, rid_key='_id', class='', allDomain=false, short=false) %}
 <td class="col--status record-status--border {{ class }} {{ model.builtin.STATUS_CODES[rdoc.status] }}">
   <div class="col--status__text">
     <span class="icon record-status--icon {{ model.builtin.STATUS_CODES[rdoc.status] }}"></span>
-    <span style="color: {{ utils.status.getScoreColor(rdoc.score|default(0)) }}">{{ rdoc.score|default(0) }}</span>
     <a 
       href="{{ url('record_detail', rid=rdoc[rid_key], domainId=rdoc.domainId) if allDomain else url('record_detail', rid=rdoc[rid_key]) }}"
       class="record-status--text {{ model.builtin.STATUS_CODES[rdoc.status] }}"
     >
-      {{ model.builtin.STATUS_TEXTS[rdoc.status] }}
+      <span style="color: {{ utils.status.getScoreColor(rdoc.score|default(0)) }}">{{ rdoc.score|default(0) }}</span>
+      {{ model.builtin.STATUS_SHORT_TEXTS[rdoc.status] if short else model.builtin.STATUS_TEXTS[rdoc.status] }}
     </a>
   </div>
   {% if rdoc.status == STATUS.STATUS_JUDGING %}

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

@@ -15,8 +15,7 @@
       <col class="col--status edit-mode-hide">
     {% endif %}
       <col class="col--name">
-      <col class="col--tried">
-      <col class="col--ac">
+      <col class="col--ac-tried">
       <col class="col--difficulty">
     </colgroup>
     <thead>
@@ -34,8 +33,7 @@
           <span class="nojs--hide toggle-tag tag--hide">{{ _('Show tags') }}</span>
           <span class="nojs--hide toggle-tag notag--hide">{{ _('Hide tags') }}</span>
         </th>
-        <th class="col--tried">{{ _('Tried') }}</th>
-        <th class="col--ac">{{ _('AC') }}</th>
+        <th class="col--ac-tried">{{ _('AC') }} / {{ _('Tried') }}</th>
         <th class="col--difficulty">{{ _('Difficulty') }}</th>
       </tr>
     </thead>
@@ -69,8 +67,7 @@
           {% endif %}
           {{ problem.render_problem_title(pdoc) }}
         </td>
-        <td class="col--tried">{{ pdoc.nSubmit }}</td>
-        <td class="col--ac">{{ pdoc.nAccept }}</td>
+        <td class="col--ac-tried">{{ pdoc.nAccept }} / {{ pdoc.nSubmit }}</td>
         <td class="col--difficulty">{{ pdoc['difficulty'] or lib.difficulty(pdoc.nSubmit, pdoc.nAccept) or _('(None)') }}</td>
       </tr>
     {%- endfor -%}