Fill out Ongoing mission cards

frontend/src/components/Header/Header.tsx

@@ -1,8 +1,12 @@
-import { Button, Icon, Search, TopBar } from "@equinor/eds-core-react"
-import { accessible, account_circle, notifications } from "@equinor/eds-icons"
-import styled from "styled-components"
+import { Button, Icon, Search, TopBar } from '@equinor/eds-core-react'
+import { accessible, account_circle, notifications } from '@equinor/eds-icons'
+import styled from 'styled-components'
 
-Icon.add({account_circle, accessible, notifications})
+Icon.add({ account_circle, accessible, notifications })
+
+const StyledTopBar = styled(TopBar)`
+    margin-bottom: 2rem;
+`
 
 const Icons = styled.div`
     display: flex;
@@ -14,27 +18,24 @@ const Icons = styled.div`
 `
 export function Header() {
     return (
-        <TopBar>
-            <TopBar.Header>
-                Flotilla - Robot Planner
-            </TopBar.Header>
+        <StyledTopBar>
+            <TopBar.Header>Flotilla - Robot Planner</TopBar.Header>
             <TopBar.CustomContent>
-                <Search aria-label="sitewide" id="search-normal" placeholder="Search"/>
+                <Search aria-label="sitewide" id="search-normal" placeholder="Search" />
             </TopBar.CustomContent>
             <TopBar.Actions>
                 <Icons>
-                    <Button variant="ghost_icon" onClick={() => console.log("Clicked account icon")}>
-                        <Icon name="account_circle" size = {16} title="user"/>
+                    <Button variant="ghost_icon" onClick={() => console.log('Clicked account icon')}>
+                        <Icon name="account_circle" size={16} title="user" />
                     </Button>
-                    <Button variant="ghost_icon" onClick={() => console.log("Clicked accessibility icon")}>
-                        <Icon name="accessible" size = {16}/>
+                    <Button variant="ghost_icon" onClick={() => console.log('Clicked accessibility icon')}>
+                        <Icon name="accessible" size={16} />
                     </Button>
-                    <Button variant="ghost_icon" onClick={() => console.log("Clicked notification icon")}>
-                        <Icon name="notifications" size={16}/>
+                    <Button variant="ghost_icon" onClick={() => console.log('Clicked notification icon')}>
+                        <Icon name="notifications" size={16} />
                     </Button>
                 </Icons>
             </TopBar.Actions>
-
-        </TopBar>
+        </StyledTopBar>
     )
-}
+}

frontend/src/components/MissionOverview/MissionStatusDisplay.tsx

@@ -0,0 +1,46 @@
+import { Icon, Typography } from '@equinor/eds-core-react'
+import { check_circle_outlined, error_outlined, time, warning_outlined } from '@equinor/eds-icons'
+import { tokens } from '@equinor/eds-tokens'
+import { MissionStatus } from 'models/mission'
+import styled from 'styled-components'
+
+Icon.add({ check_circle_outlined, error_outlined, warning_outlined, time })
+
+interface StatusProps {
+    status: MissionStatus
+}
+
+const StyledStatusDisplay = styled.div`
+    display: flex;
+    gap: 0.3em;
+    align-items: flex-end;
+`
+
+function displayIcon(status: MissionStatus) {
+    switch (status) {
+        case MissionStatus.Pending: {
+            return <Icon name="time" style={{ color: tokens.colors.text.static_icons__secondary.rgba }} />
+        }
+        case MissionStatus.Started: {
+            return <Icon name="time" style={{ color: tokens.colors.text.static_icons__secondary.rgba }} />
+        }
+        case MissionStatus.Warning: {
+            return <Icon name="warning_outlined" style={{ color: tokens.colors.interactive.warning__resting.rgba }} />
+        }
+        case MissionStatus.Successful: {
+            return (
+                <Icon name="check_circle_outlined" style={{ color: tokens.colors.interactive.success__resting.rgba }} />
+            )
+        }
+    }
+    return <Icon name="error_outlined" style={{ color: tokens.colors.interactive.danger__resting.rgba }} />
+}
+
+export function MissionStatusDisplay({ status }: StatusProps) {
+    return (
+        <StyledStatusDisplay>
+            {displayIcon(status)}
+            <Typography>{status}</Typography>
+        </StyledStatusDisplay>
+    )
+}

frontend/src/components/MissionOverview/MissionTagDisplay.tsx

@@ -0,0 +1,14 @@
+import { Typography } from '@equinor/eds-core-react'
+import styled from 'styled-components'
+
+const StyledTagCount = styled.div`
+    display: flex;
+`
+
+export function MissionProgressDisplay() {
+    return (
+        <StyledTagCount>
+            <Typography>Tag ?/?</Typography>
+        </StyledTagCount>
+    )
+}

frontend/src/components/MissionOverview/MissionView.tsx

@@ -1,7 +1,7 @@
 import { Button, Typography } from '@equinor/eds-core-react'
 import styled from 'styled-components'
 import { MissionCard } from './MissionCard'
-import { useApi,  useInterval } from 'api/ApiCaller'
+import { useApi, useInterval } from 'api/ApiCaller'
 import { useEffect, useState } from 'react'
 import { Mission } from 'models/mission'
 

frontend/src/components/MissionOverview/OngoingMissionCard.tsx

@@ -1,9 +1,10 @@
 import { Card, Typography } from '@equinor/eds-core-react'
 import { tokens } from '@equinor/eds-tokens'
-import { RobotStatusChip } from 'components/RobotCards/RobotStatusChip'
 import { Mission } from 'models/mission'
 import { defaultRobots } from 'models/robot'
 import styled from 'styled-components'
+import { MissionProgressDisplay } from './MissionTagDisplay'
+import { MissionStatusDisplay } from './MissionStatusDisplay'
 const robots = [defaultRobots['taurob'], defaultRobots['exRobotics']]
 
 interface MissionProps {
@@ -12,22 +13,22 @@ interface MissionProps {
 
 const StyledMissionCard = styled(Card)`
     width: 300px;
+    padding: 10px;
 `
 const HorisontalContent = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding-top: 2px;
+    display: grid;
+    grid-template-columns: auto auto 80px;
+    align-items: end;
 `
 
 export function OngoingMissionCard({ mission }: MissionProps) {
     return (
         <StyledMissionCard variant="default" style={{ boxShadow: tokens.elevation.sticky }}>
             <Typography variant="h6">INSPECTION</Typography>
-            <Typography>Replace with name</Typography>
+            <Typography>{mission.name}</Typography>
             <HorisontalContent>
-                <Typography>Status section here</Typography>
-                <Typography> Pause button here</Typography>
+                <MissionStatusDisplay status={mission.status} />
+                <MissionProgressDisplay />
             </HorisontalContent>
         </StyledMissionCard>
     )

frontend/src/components/MissionOverview/OngoingMissionView.tsx

@@ -2,7 +2,13 @@ import { Typography } from '@equinor/eds-core-react'
 import { defaultMission } from 'models/mission'
 import styled from 'styled-components'
 import { OngoingMissionCard } from './OngoingMissionCard'
-const testMissions = [defaultMission['test1']]
+const testMissions = [
+    defaultMission['Pending'],
+    defaultMission['Started'],
+    defaultMission['Warning'],
+    defaultMission['Failed'],
+    defaultMission['Successful'],
+]
 
 const StyledOngoingMissionView = styled.div`
     display: grid;
@@ -15,15 +21,16 @@ const OngoingMissionSection = styled.div`
 `
 
 export function OngoingMissionView() {
+    var OngoingMissions = testMissions.map(function (mission, index) {
+        return <OngoingMissionCard key={index} mission={mission} />
+    })
     return (
         <StyledOngoingMissionView>
             <Typography variant="h2" color="resting">
                 {' '}
                 Ongoing Missions
             </Typography>
-            <OngoingMissionSection>
-                <OngoingMissionCard mission={testMissions[0]} />
-            </OngoingMissionSection>
+            <OngoingMissionSection>{OngoingMissions}</OngoingMissionSection>
         </StyledOngoingMissionView>
     )
 }

frontend/src/components/Pages/FlotillaSite.tsx

@@ -3,11 +3,16 @@ import { fetchAccessToken } from 'api/AuthConfig'
 import { Header } from 'components/Header/Header'
 import { createContext, useEffect, useState } from 'react'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import styled from 'styled-components'
 import { FrontPage } from './FrontPage'
 import { MissionPage } from './MissionPage'
 
 export const AccessTokenContext = createContext('')
 
+const StyledPages = styled.div`
+    margin: 2rem;
+`
+
 export function FlotillaSite() {
     const authContext = useMsal()
     const [accessToken, setAccessToken] = useState('')
@@ -22,13 +27,15 @@ export function FlotillaSite() {
             {accessToken !== '' && (
                 <>
                     <AccessTokenContext.Provider value={accessToken}>
-                        <Header/>
-                        <BrowserRouter>
-                            <Routes>
-                                <Route path="/" element={<FrontPage />} />
-                                <Route path="/mission" element={<MissionPage />} />
-                            </Routes>
-                        </BrowserRouter>
+                        <Header />
+                        <StyledPages>
+                            <BrowserRouter>
+                                <Routes>
+                                    <Route path="/" element={<FrontPage />} />
+                                    <Route path="/mission" element={<MissionPage />} />
+                                </Routes>
+                            </BrowserRouter>
+                        </StyledPages>
                     </AccessTokenContext.Provider>
                 </>
             )}

frontend/src/components/Pages/FrontPage.tsx

@@ -4,13 +4,11 @@ import { OngoingMissionView } from 'components/MissionOverview/OngoingMissionVie
 import { RobotStatusSection } from 'components/RobotCards/RobotStatusSection'
 import { useApi } from 'api/ApiCaller'
 import styled from 'styled-components'
-import path from 'path'
-import { Link } from 'react-router-dom'
 
 const StyledFrontPage = styled.div`
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 1rem;
+    gap: 3rem;
 `
 
 export function FrontPage() {
@@ -31,11 +29,7 @@ export function FrontPage() {
                 >
                     Test Backend
                 </Button>
-                <Button
-                    href="mission"
-                >
-                    Mission Page
-                </Button>
+                <Button href="mission">Mission Page</Button>
             </div>
         </StyledFrontPage>
     )

frontend/src/components/Pages/MissionPage.tsx

@@ -1,21 +1,20 @@
-import { Button } from "@equinor/eds-core-react"
-import { useApi } from "api/ApiCaller"
-import { VideoStreamWindow } from "components/VideoStream/VideoStreamWindow"
-import styled from "styled-components"
+import { Button } from '@equinor/eds-core-react'
+import { useApi } from 'api/ApiCaller'
+import { VideoStreamWindow } from 'components/VideoStream/VideoStreamWindow'
+import styled from 'styled-components'
 
 const VideoStreamSection = styled.div`
     display: flex;
 `
 
-
 export function MissionPage() {
     const apiCaller = useApi()
     return (
         <div>
-        <VideoStreamSection>
-            <VideoStreamWindow />
-        </VideoStreamSection>
-        <Button href="..">FrontPage</Button>
+            <VideoStreamSection>
+                <VideoStreamWindow />
+            </VideoStreamSection>
+            <Button href="..">FrontPage</Button>
         </div>
     )
-}
+}

frontend/src/components/VideoStream/VideoStreamWindow.tsx

@@ -1,16 +1,16 @@
-import { Card } from "@equinor/eds-core-react";
-import { tokens } from "@equinor/eds-tokens";
-import styled from "styled-components";
+import { Card } from '@equinor/eds-core-react'
+import { tokens } from '@equinor/eds-tokens'
+import styled from 'styled-components'
 
 const VideoCard = styled(Card)`
     width: 400px;
     height: 400px;
 `
 
-
 export function VideoStreamWindow() {
-    return(
-    <VideoCard variant="default" style={{ boxShadow: tokens.elevation.sticky }}>
-        Hello
-    </VideoCard>
-)}
+    return (
+        <VideoCard variant="default" style={{ boxShadow: tokens.elevation.sticky }}>
+            Hello
+        </VideoCard>
+    )
+}