Update progress indicator based on task status

frontend/src/components/MissionOverview/MissionTagDisplay.tsx

@@ -1,14 +1,33 @@
 import { Typography } from '@equinor/eds-core-react'
+import { IsarTask, IsarTaskStatus } from 'models/IsarTask'
+import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
 const StyledTagCount = styled.div`
     display: flex;
 `
 
-export function MissionProgressDisplay() {
+interface TaskProps {
+    tasks: IsarTask[]
+}
+
+export function MissionProgressDisplay({ tasks }: TaskProps) {
+    const [completedTasks, setCompletedTasks] = useState<number>(0)
+    useEffect(() => {
+        setCompletedTasks(countCompletedTasks(tasks))
+    }, [tasks])
+
+    const countCompletedTasks = (tasks: IsarTask[]) => {
+        var counter = 0
+        tasks.map((task) => (IsarTaskStatus.isComplete(task.taskStatus) ? (counter += 1) : (counter += 0)))
+        return counter
+    }
+
     return (
         <StyledTagCount>
-            <Typography>Tag ?/?</Typography>
+            <Typography>
+                Task {completedTasks}/{tasks.length}
+            </Typography>
         </StyledTagCount>
     )
 }

frontend/src/components/MissionOverview/OngoingMissionCard.tsx

@@ -32,7 +32,7 @@ export function OngoingMissionCard({ mission }: MissionProps) {
             <Typography>{mission.robot.name}</Typography>
             <HorisontalContent>
                 <MissionStatusDisplay status={mission.missionStatus} />
-                <MissionProgressDisplay />
+                <MissionProgressDisplay tasks={mission.tasks} />
             </HorisontalContent>
         </StyledMissionCard>
     )

frontend/src/models/IsarTask.ts

@@ -11,12 +11,26 @@ export interface IsarTask {
     steps: IsarStep[]
 }
 
-enum IsarTaskStatus {
-    Successful,
-    PartiallySuccessful,
-    NotStarted,
-    InProgress,
-    Failed,
-    Cancelled,
-    Paused,
+export enum IsarTaskStatus {
+    Successful = 'Successful',
+    PartiallySuccessful = 'PartiallySuccessful',
+    NotStarted = 'NotStarted',
+    InProgress = 'InProgress',
+    Failed = 'Failed',
+    Cancelled = 'Cancelled',
+    Paused = 'Paused',
+}
+
+export namespace IsarTaskStatus {
+    export function isComplete(status: IsarTaskStatus): boolean {
+        if (
+            status === IsarTaskStatus.Successful ||
+            status === IsarTaskStatus.PartiallySuccessful ||
+            status === IsarTaskStatus.Failed ||
+            status === IsarTaskStatus.Cancelled
+        ) {
+            return true
+        }
+        return false
+    }
 }