Improve mission page

mrica-equinor · Jan 8, 2025 · 3e73ddc · 3e73ddc
1 parent 36cdfeb
commit 3e73ddc
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 106 deletions.
diff --git a/frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx b/frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx
@@ -20,6 +20,7 @@ const Centered = styled.div`
 `
 const StyledButton = styled(Button)`
     background-color: none;
+    height: fit-content;
 `
 
 interface MissionProps {

diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -18,6 +18,7 @@ const StyledTopBar = styled(TopBar)`
     @media (max-width: 600px) {
         grid-column-gap: 12px;
     }
+    height: fit-content;
 `
 const StyledWrapper = styled.div`
     display: flex;

diff --git a/frontend/src/components/Pages/FrontPage/FrontPage.tsx b/frontend/src/components/Pages/FrontPage/FrontPage.tsx
@@ -6,11 +6,12 @@ import { tokens } from '@equinor/eds-tokens'
 import { MissionControlSection } from './MissionOverview/MissionControlSection'
 
 const StyledFrontPage = styled.div`
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+    display: flex;
+    flex-direction: column;
     gap: 3rem;
     padding: 15px 15px;
     background-color: ${tokens.colors.ui.background__light.hex};
+    min-height: calc(100vh - 65px);
 `
 
 export const FrontPage = () => {

diff --git a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
@@ -3,12 +3,12 @@ import { tokens } from '@equinor/eds-tokens'
 import { Mission } from 'models/Mission'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
-import NoMap from 'mediaAssets/NoMap.png'
 import { placeRobotInMap, placeTagsInMap } from 'utils/MapMarkers'
 import { BackendAPICaller } from 'api/ApiCaller'
 import { TaskStatus } from 'models/Task'
 import { MapCompass } from 'utils/MapCompass'
 import { useRobotContext } from 'components/Contexts/RobotContext'
+import NoMap from 'mediaAssets/NoMap.png'
 
 interface MissionProps {
     mission: Mission
@@ -19,33 +19,33 @@ const MapCard = styled(Card)`
     max-width: 600px;
     padding: 16px;
     justify-items: center;
+    gap: 5px;
 `
 const StyledMap = styled.canvas`
     object-fit: contain;
     max-height: 100%;
     max-width: 90%;
-    margin: auto;
 `
 const StyledElements = styled.div`
     display: flex;
     flex-direction: columns;
     align-items: end;
 `
-const SyledContainer = styled.div`
-    display: flex;
-    max-height: 600px;
-    max-width: 100%;
-`
+
+export const getMeta = async (url: string) => {
+    const image = new Image()
+    image.src = url
+    await image.decode()
+    return image
+}
 
 export const MissionMapView = ({ mission }: MissionProps) => {
     const { enabledRobots } = useRobotContext()
     const [mapCanvas, setMapCanvas] = useState<HTMLCanvasElement>(document.createElement('canvas'))
     const [mapImage, setMapImage] = useState<HTMLImageElement>(document.createElement('img'))
     const [mapContext, setMapContext] = useState<CanvasRenderingContext2D>()
     const [currentTaskOrder, setCurrentTaskOrder] = useState<number>(0)
-
     const missionRobot = enabledRobots.find((robot) => robot.id === mission.robot.id)
-
     const imageObjectURL = useRef<string>('')
 
     const updateMap = useCallback(() => {
@@ -61,13 +61,6 @@ export const MissionMapView = ({ mission }: MissionProps) => {
         }
     }, [currentTaskOrder, mapCanvas, mapImage, mission, missionRobot?.pose])
 
-    const getMeta = async (url: string) => {
-        const image = new Image()
-        image.src = url
-        await image.decode()
-        return image
-    }
-
     const findCurrentTaskOrder = useCallback(
         () =>
             mission.tasks
@@ -133,14 +126,14 @@ export const MissionMapView = ({ mission }: MissionProps) => {
     }, [updateMap, mapContext])
 
     return (
-        <MapCard style={{ boxShadow: tokens.elevation.raised }}>
-            <Typography variant="h3">{displayedMapName}</Typography>
-            <SyledContainer>
+        <>
+            <MapCard style={{ boxShadow: tokens.elevation.raised }}>
+                <Typography variant="h4">{displayedMapName}</Typography>
                 <StyledElements>
-                    <StyledMap id="mapCanvas" />
+                    <StyledMap id="missionPageMapCanvas" />
                     {imageObjectURL.current !== NoMap && mapContext && <MapCompass />}
                 </StyledElements>
-            </SyledContainer>
-        </MapCard>
+            </MapCard>
+        </>
     )
 }
diff --git a/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx b/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx
@@ -17,28 +17,27 @@ const HeaderSection = styled(Card)`
     top: 60px;
     position: sticky;
     z-index: 1;
-    background-color: ${tokens.colors.ui.background__light.hex};
     box-shadow: none;
+    background-color: ${tokens.colors.ui.background__light.hex};
 `
 const TitleSection = styled.div`
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 20px;
 `
 const InfoSection = styled.div`
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
-    max-width: 950px;
-`
-const StyledCard = styled(Card)`
-    display: flex;
-    flex: 1 0 0;
-    padding: 8px 16px;
-    flex-direction: row;
-    background: ${tokens.colors.ui.background__default.hex};
-    gap: 24px;
-    align-items: stretch;
+    gap: 32px;
+    width: fit-content;
+    @media (max-width: 600px) {
+        display: grid;
+        grid-template-columns: repeat(3, calc(75vw / 3));
+        gap: 32px;
+        width: fit-content;
+        align-items: end;
+    }
 `
 const StyledTitleText = styled.div`
     display: grid;
@@ -51,12 +50,26 @@ const StyledTypography = styled(Typography)`
     font-style: normal;
     font-weight: 400;
     line-height: 40px; /* 125% */
-
     @media (max-width: 500px) {
         font-size: 24px;
     }
 `
 
+const StyledMissionHeader = styled(Card)`
+    display: flex;
+    padding: 10px 10px 10px 10px;
+    flex-direction: column;
+    align-items: flex-start;
+    align-content: center;
+    gap: 24px;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: 6px;
+    max-height: fit-content;
+    border: 1px solid ${tokens.colors.ui.background__medium.rgba};
+    background: ${tokens.colors.ui.background__default.rgba};
+`
+
 const HeaderText = (title: string, text: string) => {
     return (
         <StyledTitleText>
@@ -186,23 +199,17 @@ export const MissionHeader = ({ mission }: { mission: Mission }) => {
                 </Typography>
                 <StatusReason statusReason={mission.statusReason} status={mission.status}></StatusReason>
             </HeaderSection>
-            <InfoSection>
-                <StyledCard>
+            <StyledMissionHeader>
+                <InfoSection>
                     <div>
                         {HeaderText(translatedStatus, '')}
                         <MissionStatusDisplay status={mission.status} />
                     </div>
                     {HeaderText(translatedTasks, `${numberOfCompletedTasks + '/' + mission.tasks.length}`)}
-                </StyledCard>
-                <StyledCard>
                     {HeaderText(translatedStartDate, `${startDate}`)}
                     {HeaderText(translatedStartTime, `${startTime}`)}
-                </StyledCard>
-                <StyledCard>
                     {HeaderText(translatedUsedTime, `${usedTime}`)}
                     {!isMissionCompleted && HeaderText(translatedEstimatedTimeRemaining, `${remainingTime}`)}
-                </StyledCard>
-                <StyledCard>
                     {HeaderText(translatedRobot, `${mission.robot.name}`)}
                     {!isMissionCompleted && HeaderText(translatedBatteryLevel, batteryValue)}
                     {!isMissionCompleted &&
@@ -212,8 +219,8 @@ export const MissionHeader = ({ mission }: { mission: Mission }) => {
                             translatedPressureLevel,
                             `${Math.round(mission.robot.pressureLevel * barToMillibar)}mBar`
                         )}
-                </StyledCard>
-            </InfoSection>
+                </InfoSection>
+            </StyledMissionHeader>
         </>
     )
 }
diff --git a/frontend/src/components/Pages/MissionPage/MissionPage.tsx b/frontend/src/components/Pages/MissionPage/MissionPage.tsx
@@ -19,18 +19,48 @@ import { tokens } from '@equinor/eds-tokens'
 import { StyledPage } from 'components/Styles/StyledComponents'
 import { InspectionDialogView, InspectionsViewSection } from '../InspectionReportPage.tsx/InspectionView'
 import { useInspectionsContext } from 'components/Contexts/InpectionsContext'
+import { Typography } from '@equinor/eds-core-react'
 
 const StyledMissionPage = styled(StyledPage)`
     background-color: ${tokens.colors.ui.background__light.hex};
 `
 const TaskAndMapSection = styled.div`
     display: flex;
+    min-height: 60%;
+    padding: 24px;
+    @media (max-width: 600px) {
+        padding: 6px 8px 8px 6px;
+    }
+    flex-direction: column;
+    justify-content: center;
     align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 6px;
+    border: 1px solid ${tokens.colors.ui.background__medium.rgba};
+    background: ${tokens.colors.ui.background__default.rgba};
+`
+
+const StyledTableAndMap = styled.div`
+    display: flex;
     flex-wrap: wrap;
-    gap: 8rem;
-    padding-top: 16px;
-    padding-bottom: 16px;
+    align-items: top;
+    gap: 24px;
+`
+const StyledMissionPageContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 `
+
+const StyledMissionPageCardsWidth = styled.div`
+    display: flex;
+    flex-direction: column;
+    min-width: 50%;
+    max-width: fit-content;
+    gap: 20px;
+`
+
 export const VideoStreamSection = styled.div`
     display: grid;
     gap: 1rem;
@@ -92,27 +122,36 @@ export const MissionPage = () => {
                 })
     }, [missionId])
 
+    console.log(selectedMission)
+
     return (
         <>
             <Header page={'mission'} />
             <StyledMissionPage>
                 <BackButton />
                 {selectedMission !== undefined && (
                     <>
-                        <MissionHeader mission={selectedMission} />
-                        <TaskAndMapSection>
-                            <TaskTable tasks={selectedMission?.tasks} />
-                            <MissionMapView mission={selectedMission} />
-                        </TaskAndMapSection>
-                        <VideoStreamSection>
-                            {videoMediaStreams && videoMediaStreams.length > 0 && (
-                                <VideoStreamWindow videoStreams={videoMediaStreams} />
+                        <StyledMissionPageContent>
+                            <StyledMissionPageCardsWidth>
+                                <MissionHeader mission={selectedMission} />
+                                <TaskAndMapSection>
+                                    <Typography variant="h4">{TranslateText('Tasks')}</Typography>
+                                    <StyledTableAndMap>
+                                        <TaskTable tasks={selectedMission?.tasks} />
+                                        {selectedMission.map?.mapName && <MissionMapView mission={selectedMission} />}
+                                    </StyledTableAndMap>
+                                </TaskAndMapSection>
+                            </StyledMissionPageCardsWidth>
+                            <VideoStreamSection>
+                                {videoMediaStreams && videoMediaStreams.length > 0 && (
+                                    <VideoStreamWindow videoStreams={videoMediaStreams} />
+                                )}
+                            </VideoStreamSection>
+                            {selectedInspectionTask && selectedInspectionTask.isarTaskId && (
+                                <InspectionDialogView task={selectedInspectionTask} tasks={selectedMission.tasks} />
                             )}
-                        </VideoStreamSection>
-                        {selectedInspectionTask && selectedInspectionTask.isarTaskId && (
-                            <InspectionDialogView task={selectedInspectionTask} tasks={selectedMission.tasks} />
-                        )}
-                        <InspectionsViewSection tasks={selectedMission.tasks} />
+                            <InspectionsViewSection tasks={selectedMission.tasks} />
+                        </StyledMissionPageContent>
                     </>
                 )}
             </StyledMissionPage>

diff --git a/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx b/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx
@@ -5,7 +5,6 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Task, TaskStatus } from 'models/Task'
 import { tokens } from '@equinor/eds-tokens'
 import { getColorsFromTaskStatus } from 'utils/MarkerStyles'
-import { StyledTableBody, StyledTableCaptionGray, StyledTableCell } from 'components/Styles/StyledComponents'
 import { InspectionType } from 'models/Inspection'
 import { useInspectionsContext } from 'components/Contexts/InpectionsContext'
 
@@ -14,19 +13,7 @@ const StyledTable = styled(Table)`
     overflow: auto;
     max-width: calc(80vw);
 `
-const StyledTypography = styled(Typography)`
-    font-family: Equinor;
-    font-size: 28px;
-    font-style: normal;
-    line-height: 35px;
 
-    @media (max-width: 500px) {
-        font-size: 24px;
-        line-height: 30px;
-    }
-
-    padding-bottom: 10px;
-`
 interface TaskTableProps {
     tasks: Task[] | undefined
 }
@@ -35,23 +22,18 @@ export const TaskTable = ({ tasks }: TaskTableProps) => {
     const { TranslateText } = useLanguageContext()
 
     return (
-        <>
-            <StyledTable>
-                <StyledTableCaptionGray>
-                    <StyledTypography variant="h2">{TranslateText('Tasks')}</StyledTypography>
-                </StyledTableCaptionGray>
-                <Table.Head>
-                    <Table.Row>
-                        <StyledTableCell>#</StyledTableCell>
-                        <StyledTableCell>{TranslateText('Tag-ID')}</StyledTableCell>
-                        <StyledTableCell>{TranslateText('Description')}</StyledTableCell>
-                        <StyledTableCell>{TranslateText('Inspection Types')}</StyledTableCell>
-                        <StyledTableCell>{TranslateText('Status')}</StyledTableCell>
-                    </Table.Row>
-                </Table.Head>
-                <StyledTableBody>{tasks && <TaskTableRows tasks={tasks} />}</StyledTableBody>
-            </StyledTable>
-        </>
+        <StyledTable>
+            <Table.Head>
+                <Table.Row>
+                    <Table.Cell>#</Table.Cell>
+                    <Table.Cell>{TranslateText('Tag-ID')}</Table.Cell>
+                    <Table.Cell>{TranslateText('Description')}</Table.Cell>
+                    <Table.Cell>{TranslateText('Inspection Types')}</Table.Cell>
+                    <Table.Cell>{TranslateText('Status')}</Table.Cell>
+                </Table.Row>
+            </Table.Head>
+            <Table.Body>{tasks && <TaskTableRows tasks={tasks} />}</Table.Body>
+        </StyledTable>
     )
 }
 

diff --git a/frontend/src/components/Styles/StyledComponents.tsx b/frontend/src/components/Styles/StyledComponents.tsx
@@ -52,6 +52,3 @@ export const StyledTableBody = styled(Table.Body)`
 export const StyledTableCaption = styled(Table.Caption)`
     background-color: ${tokens.colors.ui.background__default.hex};
 `
-export const StyledTableCaptionGray = styled(Table.Caption)`
-    background-color: ${tokens.colors.ui.background__light.hex};
-`