From 84602a404ccab628a73b7d3d2c88ae5427e4d004 Mon Sep 17 00:00:00 2001
From: colorfulberry <senluowanxiangt@gmail.com>
Date: Thu, 21 May 2020 17:38:28 +0800
Subject: [PATCH] feat: update tmpl

---
 templates/datasets/create.tmpl |  3 +-
 web_src/js/index.js            | 60 ++++++++++++++++++++++++++++++++++
 web_src/less/_dataset.less     | 49 +++++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 1 deletion(-)

diff --git a/templates/datasets/create.tmpl b/templates/datasets/create.tmpl
index 8af7cddc2..cfb1ad33e 100644
--- a/templates/datasets/create.tmpl
+++ b/templates/datasets/create.tmpl
@@ -110,7 +110,8 @@
 					<div class="field required dataset-files">
 						<label>{{.i18n.Tr "dataset.file"}}</label>
 						<div class="files"></div>
-						<div class="ui dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="1" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
+						<div class="ui dropzone" id="dataset" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="1000" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}">
+						</div>
 					</div>
 					<br/>
 					<div class="inline field">
diff --git a/web_src/js/index.js b/web_src/js/index.js
index f7b4ef24d..249cdaad1 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -2305,6 +2305,66 @@ $(document).ready(async () => {
     });
   }
 
+  // dataset Dropzone
+  const $dataset = $('#dataset');
+  if ($dataset.length > 0) {
+    const filenameDict = {};
+    let previewTemplate = '';
+    previewTemplate += '<div class="dz-preview dz-file-preview">\n ';
+    previewTemplate += '    <div class="dz-details">\n ';
+    previewTemplate += '        <div class="dz-filename">';
+    previewTemplate += '            <span data-dz-name></span>';
+    previewTemplate += '        </div>\n    ';
+    previewTemplate += '        <div class="dz-size" data-dz-size></div>\n  ';
+    previewTemplate += '        <img data-dz-thumbnail />\n  ';
+    previewTemplate += '    </div>\n  ';
+    previewTemplate += '    <div class="dz-progress ui active progress">';
+    previewTemplate += '        <div class="dz-upload bar" data-dz-uploadprogress><div class="progress"></div></div>\n  ';
+    previewTemplate += '    </div>\n  ';
+    previewTemplate += '    <div class="dz-success-mark">';
+    previewTemplate += '        <span>上传成功</span>';
+    previewTemplate += '    </div>\n  ';
+    previewTemplate += '    <div class="dz-error-mark">';
+    previewTemplate += '        <span>上传失败</span>';
+    previewTemplate += '    </div>\n  ';
+    previewTemplate += '    <div class="dz-error-message">';
+    previewTemplate += '        <span data-dz-errormessage></span>';
+    previewTemplate += '    </div>\n';
+    previewTemplate += '</div>';
+
+    await createDropzone('#dataset', {
+      url: $dataset.data('upload-url'),
+      headers: {'X-Csrf-Token': csrf},
+      maxFiles: $dataset.data('max-file'),
+      maxFilesize: $dataset.data('max-size'),
+      acceptedFiles: ($dataset.data('accepts') === '*/*') ? null : $dataset.data('accepts'),
+      addRemoveLinks: true,
+      dictDefaultMessage: $dataset.data('default-message'),
+      dictInvalidFileType: $dataset.data('invalid-input-type'),
+      dictFileTooBig: $dataset.data('file-too-big'),
+      dictRemoveFile: $dataset.data('remove-file'),
+      previewTemplate,
+      init() {
+        this.on('success', (file, data) => {
+          filenameDict[file.name] = data.uuid;
+          const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
+          $('.files').append(input);
+        });
+        this.on('removedfile', (file) => {
+          if (file.name in filenameDict) {
+            $(`#${filenameDict[file.name]}`).remove();
+          }
+          if ($dataset.data('remove-url') && $dataset.data('csrf')) {
+            $.post($dataset.data('remove-url'), {
+              file: filenameDict[file.name],
+              _csrf: $dataset.data('csrf')
+            });
+          }
+        });
+      },
+    });
+  }
+
   // Helpers.
   $('.delete-button').on('click', showDeletePopup);
   $('.add-all-button').on('click', showAddAllPopup);
diff --git a/web_src/less/_dataset.less b/web_src/less/_dataset.less
index 99d89b6b0..c3072696e 100644
--- a/web_src/less/_dataset.less
+++ b/web_src/less/_dataset.less
@@ -2,5 +2,54 @@
   padding-top: 15px;
   .dataset-files {
     margin: 0 30px !important;
+    #dataset {
+      .dz-preview {
+        border-bottom: 1px solid rgb(218, 220, 224);
+        min-height: 0;
+      }
+      .dz-preview.dz-file-preview.dz-processing {
+        display: flex;
+        align-items: center;
+        .dz-details {
+          display: flex;
+          padding: 0 0 10px 0;
+          min-width: 60%;
+          max-width: 60%;
+          position: relative;
+        }
+        .dz-success-mark {
+          z-index: 0;
+          position: relative;
+          top: 0;
+          left: auto;
+          color: green;
+          margin: 0 16px;
+        }
+        .dz-error-mark {
+          z-index: 0;
+          position: relative;
+          top: 0;
+          left: auto;
+          color: red;
+          margin: 0 16px;
+        }
+        .bar {
+          background: #21ba45;
+        }
+        .dz-progress {
+          left: 4px;
+          background: grey;
+          width: 70%;
+          top: 20px;
+          margin: 0;
+        }
+        .dz-file {
+          margin-bottom: auto;
+        }
+      }
+      .dz-preview .dz-error-message {
+        top: 30px;
+      }
+    }
   }
 }
\ No newline at end of file