Show progress bar instead of text info in tasks

1 files changed, 35 insertions, 20 deletions

diff --git a/src/components/app/sidebars/simulation/TaskComponent.js b/src/components/app/sidebars/simulation/TaskComponent.js
index 038e1f71..baf6f9ce 100644
--- a/src/components/app/sidebars/simulation/TaskComponent.js
+++ b/src/components/app/sidebars/simulation/TaskComponent.js
@@ -1,31 +1,29 @@
 import approx from "approximate-number";
+import classNames from "classnames";
 import React from "react";
 import {convertSecondsToFormattedTime} from "../../../../util/date-time";
 
 const TaskComponent = ({task, flopsLeft}) => {
-    let stateInfo;
+    let icon;
+    let progressBarContent;
+    let percent;
+    let infoTitle;
 
     if (flopsLeft === task.totalFlopCount) {
-        stateInfo = (
-            <div>
-                <span className="fa fa-hourglass-half mr-2"/>
-                Waiting
-            </div>
-        );
+        icon = "hourglass-half";
+        progressBarContent = "";
+        percent = 0;
+        infoTitle = "Not submitted yet";
     } else if (flopsLeft > 0) {
-        stateInfo = (
-            <div>
-                <span className="fa fa-refresh mr-2"/>
-                Running ({approx(task.totalFlopCount - flopsLeft)} / {approx(task.totalFlopCount)} FLOP)
-            </div>
-        );
+        icon = "refresh";
+        progressBarContent = approx(task.totalFlopCount - flopsLeft) + " FLOP";
+        percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount;
+        infoTitle = progressBarContent + " (" + Math.round(percent * 10) / 10 + "%)";
     } else {
-        stateInfo = (
-            <div>
-                <span className="fa fa-check mr-2"/>
-                Completed
-            </div>
-        );
+        icon = "check";
+        progressBarContent = "Completed";
+        percent = 100;
+        infoTitle = "Completed";
     }
 
     return (
@@ -34,7 +32,24 @@ const TaskComponent = ({task, flopsLeft}) => {
                 <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5>
                 <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
             </div>
-            {stateInfo}
+            <div title={infoTitle} style={{display: "flex"}}>
+                <span
+                    className={classNames("fa", "fa-" + icon)}
+                    style={{width: "20px"}}
+                />
+                <div className="progress" style={{flexGrow: 1}}>
+                    <div
+                        className="progress-bar"
+                        role="progressbar"
+                        aria-valuenow={percent}
+                        aria-valuemin="0"
+                        aria-valuemax="100"
+                        style={{width: percent + "%"}}
+                    >
+                        {progressBarContent}
+                    </div>
+                </div>
+            </div>
         </li>
     );
 };