1 files changed, 64 insertions, 0 deletions
diff --git a/src/scripts/controllers/simulation/taskview.ts b/src/scripts/controllers/simulation/taskview.ts
new file mode 100644
index 00000000..d989e103
--- /dev/null
+++ b/src/scripts/controllers/simulation/taskview.ts
@@ -0,0 +1,64 @@
+import * as $ from "jquery";
+import {SimulationController} from "../simulationcontroller";
+import {Util} from "../../util";
+
+
+export class TaskViewController {
+    private simulationController: SimulationController;
+
+
+    constructor(simulationController: SimulationController) {
+        this.simulationController = simulationController;
+    }
+
+    /**
+     * Populates and displays the list of tasks with their current state.
+     */
+    public update() {
+        const container = $(".task-list");
+        container.children().remove(".task-element");
+
+        this.simulationController.stateCache.stateList[this.simulationController.currentTick].taskStates
+            .forEach((taskState: ITaskState) => {
+                const html = this.generateTaskElementHTML(taskState);
+                container.append(html);
+            });
+    }
+
+    private generateTaskElementHTML(taskState: ITaskState) {
+        let iconType, timeInfo;
+
+        if (taskState.task.startTick > this.simulationController.currentTick) {
+            iconType = "glyphicon-time";
+            timeInfo = "Not started yet";
+        } else if (taskState.task.startTick <= this.simulationController.currentTick && taskState.flopsLeft > 0) {
+            iconType = "glyphicon-refresh";
+            timeInfo = "Started at " + Util.convertSecondsToFormattedTime(taskState.task.startTick);
+        } else if (taskState.flopsLeft === 0) {
+            iconType = "glyphicon-ok";
+            timeInfo = "Started at " + Util.convertSecondsToFormattedTime(taskState.task.startTick);
+        }
+
+        // Calculate progression ratio
+        const progress = 1 - (taskState.flopsLeft / taskState.task.totalFlopCount);
+
+        // Generate completion text
+        const flopsCompleted = taskState.task.totalFlopCount - taskState.flopsLeft;
+        const completionInfo = "Completed: " + flopsCompleted + " / " + taskState.task.totalFlopCount + " FLOPS";
+
+        return '<div class="task-element">' +
+            '  <div class="task-icon glyphicon ' + iconType + '"></div>' +
+            '  <div class="task-info">' +
+            '    <div class="task-time">' + timeInfo +
+            '    </div>' +
+            '    <div class="progress">' +
+            '      <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="' +
+            progress * 100 + '%"' +
+            '        aria-valuemin="0" aria-valuemax="100" style="width: ' + progress * 100 + '%">' +
+            '      </div>' +
+            '    </div>' +
+            '    <div class="task-flops">' + completionInfo + '</div>' +
+            '  </div>' +
+            '</div>';
+    }
+}