From 0cff932343c51896a81a43dc7851ec6771be4c0a Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Thu, 10 Feb 2022 14:38:44 +0800
Subject: [PATCH] fix(fe/uploadings): disable button when uploading is stopped
 or error found

---
 public/static/css/white.css                   |  8 +++++
 .../web/src/components/panel_uploadings.tsx   | 32 +++++++++++++++++--
 src/client/web/src/i18n/en_US.ts              |  4 ++-
 src/client/web/src/i18n/zh_CN.ts              |  2 ++
 4 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/public/static/css/white.css b/public/static/css/white.css
index 3f6cb75..adf3f91 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -648,3 +648,11 @@
 .item-name-horizontal {
   width: 48rem;
 }
+
+.theme-default .badge {
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: bold;
+  font-size: 1.2rem;
+  padding: 0.8rem 1rem;
+}
diff --git a/src/client/web/src/components/panel_uploadings.tsx b/src/client/web/src/components/panel_uploadings.tsx
index 0348841..d763633 100644
--- a/src/client/web/src/components/panel_uploadings.tsx
+++ b/src/client/web/src/components/panel_uploadings.tsx
@@ -76,9 +76,12 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
     const uploadingRows = uploadings.map((uploading: UploadEntry) => {
       const pathParts = uploading.filePath.split("/");
       const fileName = pathParts[pathParts.length - 1];
-      const progress = Math.floor((uploading.uploaded / uploading.size) * 100);
+      const progress =
+        uploading.size === 0
+          ? 100
+          : Math.floor((uploading.uploaded / uploading.size) * 100);
 
-      const op = (
+      let rightCell = (
         <div className="item-op">
           <button
             onClick={() => this.stopUploading(uploading.filePath)}
@@ -95,6 +98,29 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
         </div>
       );
 
+      switch (uploading.state) {
+        case UploadState.Error:
+          rightCell = (
+            <div className="item-op">
+              <span className="badge white-font red0-bg">
+                {this.props.msg.pkg.get("state.error")}
+              </span>
+            </div>
+          );
+          break;
+        case UploadState.Stopped:
+          rightCell = (
+            <div className="item-op">
+              <span className="badge yellow0-font black-bg">
+                {this.props.msg.pkg.get("state.stopped")}
+              </span>
+            </div>
+          );
+          break;
+        default:
+        // no op
+      }
+
       const progressBar = (
         <div className="progress-grey">
           <div
@@ -124,7 +150,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
             </span>
           </div>
 
-          <div className="op">{op}</div>
+          <div className="op">{rightCell}</div>
 
           {progressBar}
           {errorInfo}
diff --git a/src/client/web/src/i18n/en_US.ts b/src/client/web/src/i18n/en_US.ts
index 91a1e54..eae8ad3 100644
--- a/src/client/web/src/i18n/en_US.ts
+++ b/src/client/web/src/i18n/en_US.ts
@@ -133,7 +133,9 @@ export const msgs: Map<string, string> = Map({
   "op.cancel": "Cancel",
   "term.time": "Time",
   "breadcrumb.loc": "Location",
-  "endpoints": "Endpoints",
+  endpoints: "Endpoints",
   "endpoints.root": "Root",
   "endpoints.home": "Home",
+  "state.stopped": "Stopped",
+  "state.error": "Error",
 });
diff --git a/src/client/web/src/i18n/zh_CN.ts b/src/client/web/src/i18n/zh_CN.ts
index aaf4b10..239bd0a 100644
--- a/src/client/web/src/i18n/zh_CN.ts
+++ b/src/client/web/src/i18n/zh_CN.ts
@@ -133,4 +133,6 @@ export const msgs: Map<string, string> = Map({
   "endpoints": "端点",
   "endpoints.root": "根",
   "endpoints.home": "家",
+  "state.stopped": "已停止",
+  "state.error": "错误",
 });