ui: 上传进度条

packages/ui-default/components/dialog/index.js

@@ -2,7 +2,7 @@ import tpl from 'vj/utils/tpl';
 import i18n from 'vj/utils/i18n';
 import DomDialog from './DomDialog';
 
-export default class Dialog {
+export class Dialog {
   constructor(options = {}) {
     this.options = {
       classes: '',
@@ -52,6 +52,8 @@ export default class Dialog {
   }
 }
 
+export default Dialog;
+
 const buttonOk = tpl`<button class="primary rounded button" data-action="ok">${i18n('Ok')}</button>`;
 const buttonCancel = tpl`<button class="rounded button" data-action="cancel">${i18n('Cancel')}</button>`;
 const buttonYes = tpl`<button class="primary rounded button" data-action="yes">${i18n('Yes')}</button>`;

packages/ui-default/hydro.js

@@ -3,6 +3,10 @@ import 'jquery.transit';
 import _ from 'lodash';
 import PageLoader from 'vj/misc/PageLoader';
 import delay from 'vj/utils/delay';
+import base64 from 'vj/utils/base64';
+
+window.UiContext = JSON.parse(base64.decode(window.UiContext));
+window.UserContext = JSON.parse(base64.decode(window.UserContext));
 
 // eslint-disable-next-line
 try { __webpack_public_path__ = UiContext.cdn_prefix } catch (e) { }

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

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import { createZipStream } from 'vj/utils/zip';
 import { NamedPage } from 'vj/misc/Page';
 import Notification from 'vj/components/notification';
-import { ConfirmDialog, ActionDialog } from 'vj/components/dialog/index';
+import { ConfirmDialog, ActionDialog, Dialog } from 'vj/components/dialog/index';
 import request from 'vj/utils/request';
 import pjax from 'vj/utils/pjax';
 import pipeStream from 'vj/utils/pipeStream';
@@ -19,6 +19,15 @@ if (window.location.protocol === 'https:'
   streamsaver.mitm = '/streamsaver/mitm.html';
 }
 
+let isBeforeUnloadTriggeredByLibrary = !window.isSecureContext;
+function onBeforeUnload(e) {
+  if (isBeforeUnloadTriggeredByLibrary) {
+    isBeforeUnloadTriggeredByLibrary = false;
+    return;
+  }
+  e.returnValue = '';
+}
+
 async function downloadProblemFilesAsArchive(type, files) {
   const { links, pdoc } = await request.post('', { operation: 'get_links', files, type });
   const fileStream = streamsaver.createWriteStream(`${pdoc.docId} ${pdoc.title}.zip`);
@@ -46,14 +55,6 @@ async function downloadProblemFilesAsArchive(type, files) {
   });
   const abortCallbackReceiver = {};
   function stopDownload() { abortCallbackReceiver.abort(); }
-  let isBeforeUnloadTriggeredByLibrary = !window.isSecureContext;
-  function onBeforeUnload(e) {
-    if (isBeforeUnloadTriggeredByLibrary) {
-      isBeforeUnloadTriggeredByLibrary = false;
-      return;
-    }
-    e.returnValue = '';
-  }
   window.addEventListener('unload', stopDownload);
   window.addEventListener('beforeunload', onBeforeUnload);
   await pipeStream(zipStream, fileStream, abortCallbackReceiver);
@@ -85,65 +86,56 @@ const page = new NamedPage('problem_files', () => {
     }
     try {
       Notification.info(i18n('Uploading files...'));
-      const tasks = [];
+      window.addEventListener('beforeunload', onBeforeUnload);
       const dialog = new Dialog({
-        $body: `<div class="upload-label" style="text-align: center;margin-bottom: 8px;color: gray;"></div>
+        $body: `\
-                <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
+          <div class="upload-label" style="text-align: center;margin-bottom: 8px;color: gray;"></div>
-                  <div class="upload-progress bp3-progress-meter" style="width: 0"></div>
+          <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
-                </div>
+            <div class="upload-progress bp3-progress-meter" style="width: 0"></div>
-                <div class="file-label" style="text-align: center;margin: 5px 0;color: gray;font-size: small;"></div>
+          </div>
-                <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
+          <div class="file-label" style="text-align: center;margin: 5px 0;color: gray;font-size: small;"></div>
-                  <div class="file-progress bp3-progress-meter" style="width: 0"></div>
+          <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
-                </div>`,
+            <div class="file-progress bp3-progress-meter" style="width: 0"></div>
+          </div>`,
       });
+      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');
-      let processed = 0;
+      for (const i in files) {
-      for (const file of 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('type', type);
         data.append('operation', 'upload_file');
-        tasks.push(request.postFile('', data, {
+        await request.postFile('', data, {
           xhr() {
-            const xhr = new window.XMLHttpRequest();
+            const xhr = new XMLHttpRequest();
-            xhr.upload.addEventListener("loadstart", () => {
+            xhr.upload.addEventListener('loadstart', () => {
-              processed++;
+              $fileLabel.text(`[${+i + 1}/${files.length}] ${file.name}`);
-              $fileLabel.text(`[${processed}/${files.length}] ${file.name}`);
+              $fileProgress.width(`${Math.round((+i + 1) / file.length * 100)}%`);
-              $fileProgress.css({ width: `${parseInt(processed / file.length * 100)}%` });
+              $uploadLabel.text(i18n('Uploading... ({0}%)', 0));
-              $uploadLabel.text(i18n("Uploading... ({0}%)", 0));
+              $uploadProgress.width(0);
-              $uploadProgress.css({ width: 0 });
             });
-            xhr.upload.addEventListener("progress", (e) => {
+            xhr.upload.addEventListener('progress', (e) => {
               if (e.lengthComputable) {
-                let percentComplete = e.loaded / e.total;
+                const percentComplete = Math.round((e.loaded / e.total) * 100);
-                percentComplete = parseInt(percentComplete * 100);
+                if (percentComplete === 100) $uploadLabel.text(i18n('Processing...'));
-                $uploadLabel.text(i18n("Uploading... ({0}%)", percentComplete));
+                else $uploadLabel.text(i18n('Uploading... ({0}%)', percentComplete));
-                $uploadProgress.css({ width: `${percentComplete}%` });
+                $uploadProgress.width(`${percentComplete}%`);
               }
             }, false);
             return xhr;
           },
-        }));
+        });
       }
-      dialog.open();
+      dialog.close();
-      let isBeforeUnloadTriggeredByLibrary = !window.isSecureContext;
-      function onBeforeUnload(e) {
-        if (isBeforeUnloadTriggeredByLibrary) {
-          isBeforeUnloadTriggeredByLibrary = false;
-          return;
-        }
-        e.returnValue = '';
-      }
-      window.addEventListener('beforeunload', onBeforeUnload);
-      await Promise.all(tasks);
       window.removeEventListener('beforeunload', onBeforeUnload);
       Notification.success(i18n('File uploaded successfully.'));
-      await delay(2000);
+      await pjax.request({ push: false });
-      window.location.reload();
     } catch (e) {
       console.error(e);
       Notification.error(i18n('File upload failed: {0}', e.toString()));
@@ -193,6 +185,10 @@ const page = new NamedPage('problem_files', () => {
    * @param {JQuery.DropEvent<HTMLElement, undefined, HTMLElement, HTMLElement>} ev
    */
   function handleDrop(type, ev) {
+    if (!$('[name="remove_selected_testdata"]').length) {
+      Notification.error(i18n("You don't have permission to upload file."));
+      return;
+    }
     ev.preventDefault();
     ev = ev.originalEvent;
     const files = [];
@@ -268,10 +264,6 @@ const page = new NamedPage('problem_files', () => {
   if ($('[name="remove_selected_testdata"]').length) {
     $('.problem-files-testdata .col--name').on('click', (ev) => handleEdit('testdata', ev));
     $('.problem-files-additional_file .col--name').on('click', (ev) => handleEdit('additional_file', ev));
-    $('.problem-files-testdata').on('dragover', (ev) => handleDragOver('testdata', ev));
-    $('.problem-files-additional_file').on('dragover', (ev) => handleDragOver('additional_file', ev));
-    $('.problem-files-testdata').on('drop', (ev) => handleDrop('testdata', ev));
-    $('.problem-files-additional_file').on('drop', (ev) => handleDrop('additional_file', ev));
     $('[name="upload_testdata"]').on('click', () => handleClickUpload('testdata'));
     $('[name="upload_file"]').on('click', () => handleClickUpload('additional_file'));
     $('[name="create_testdata"]').on('click', () => handleEdit('testdata'));
@@ -279,6 +271,10 @@ const page = new NamedPage('problem_files', () => {
     $('[name="remove_selected_testdata"]').on('click', () => handleClickRemoveSelected('testdata'));
     $('[name="remove_selected_file"]').on('click', () => handleClickRemoveSelected('additional_file'));
   }
+  $('.problem-files-testdata').on('dragover', (ev) => handleDragOver('testdata', ev));
+  $('.problem-files-additional_file').on('dragover', (ev) => handleDragOver('additional_file', ev));
+  $('.problem-files-testdata').on('drop', (ev) => handleDrop('testdata', ev));
+  $('.problem-files-additional_file').on('drop', (ev) => handleDrop('additional_file', ev));
   $('[name="download_selected_testdata"]').on('click', () => handleClickDownloadSelected('testdata'));
   $('[name="download_selected_file"]').on('click', () => handleClickDownloadSelected('additional_file'));
 });

packages/ui-default/templates/layout/html5.html

@@ -43,8 +43,8 @@
   {% block body %}{% endblock %}
   {% if not isIE(handler.request.headers['user-agent']) %}
   <script>
-    var UiContext = {{ UiContext|json|safe }};
+    var UiContext = "{{ UiContext|json|base64_encode }}";
-    var UserContext = {{ UserContext|json|safe }};
+    var UserContext = "{{ UserContext|json|base64_encode }}";
   </script>
   <script type="text/javascript" src="{{ ('/locale/{0}.js'.format(handler.translate('__id'))) }}"></script>
   <script type="text/javascript" src="/ui-constants.js"></script>