1 files changed, 58 insertions, 0 deletions
diff --git a/frontend/src/components/app/sidebars/simulation/TaskComponent.js b/frontend/src/components/app/sidebars/simulation/TaskComponent.js
new file mode 100644
index 00000000..bd917cc9
--- /dev/null
+++ b/frontend/src/components/app/sidebars/simulation/TaskComponent.js
@@ -0,0 +1,58 @@
+import approx from "approximate-number";
+import classNames from "classnames";
+import React from "react";
+import { convertSecondsToFormattedTime } from "../../../../util/date-time";
+
+const TaskComponent = ({ task, flopsLeft }) => {
+  let icon;
+  let progressBarContent;
+  let percent;
+  let infoTitle;
+
+  if (flopsLeft === task.totalFlopCount) {
+    icon = "hourglass-half";
+    progressBarContent = "";
+    percent = 0;
+    infoTitle = "Not submitted yet";
+  } else if (flopsLeft > 0) {
+    icon = "refresh";
+    progressBarContent = approx(task.totalFlopCount - flopsLeft) + " FLOP";
+    percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount;
+    infoTitle =
+      progressBarContent + " (" + Math.round(percent * 10) / 10 + "%)";
+  } else {
+    icon = "check";
+    progressBarContent = "Completed";
+    percent = 100;
+    infoTitle = "Completed";
+  }
+
+  return (
+    <li className="list-group-item flex-column align-items-start">
+      <div className="d-flex w-100 justify-content-between">
+        <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5>
+        <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
+      </div>
+      <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>
+  );
+};
+
+export default TaskComponent;