blob: bd917cc9e5a0719d4e495a9ed9b7f108b75a4990 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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;
|
