Improve mission page

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

Hide file tree

Showing 9 changed files with 154 additions and 134 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
@@ -1,14 +1,14 @@
 import { Card, Typography } from '@equinor/eds-core-react'
 import { tokens } from '@equinor/eds-tokens'
 import { Mission } from 'models/Mission'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, 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 { useInstallationContext } from 'components/Contexts/InstallationContext'
 
 interface MissionProps {
     mission: Mission
@@ -19,34 +19,35 @@ 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 { installationCode } = useInstallationContext()
     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 [displayMap, setDisplayMap] = useState<boolean>(false)
 
     const updateMap = useCallback(() => {
         const context = mapCanvas.getContext('2d')
@@ -61,13 +62,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
@@ -80,32 +74,32 @@ export const MissionMapView = ({ mission }: MissionProps) => {
     displayedMapName = displayedMapName ? displayedMapName.charAt(0).toUpperCase() + displayedMapName.slice(1) : ' '
 
     useEffect(() => {
+        const processImageURL = (imageBlob: Blob | string) => {
+            const imageObjectURL = typeof imageBlob === 'string' ? imageBlob : URL.createObjectURL(imageBlob as Blob)
+            if (!imageObjectURL) return
+
+            getMeta(imageObjectURL as string).then((img) => {
+                const mapCanvas = document.getElementById('missionPageMapCanvas') as HTMLCanvasElement
+                if (!mapCanvas) return
+                mapCanvas.width = img.width
+                mapCanvas.height = img.height
+                const context = mapCanvas?.getContext('2d')
+                if (context) {
+                    setMapContext(context)
+                    context.drawImage(img, 0, 0)
+                }
+                setMapCanvas(mapCanvas)
+                setMapImage(img)
+            })
+        }
+
         if (mission.map?.mapName) {
-            BackendAPICaller.getMap(mission.installationCode!, mission.map?.mapName)
+            BackendAPICaller.getMap(installationCode, mission.map?.mapName!)
                 .then((imageBlob) => {
-                    imageObjectURL.current = URL.createObjectURL(imageBlob)
+                    processImageURL(imageBlob)
+                    setDisplayMap(true)
                 })
-                .catch(() => {
-                    imageObjectURL.current = NoMap
-                })
-                .then(() => {
-                    getMeta(imageObjectURL.current).then((img) => {
-                        const mapCanvas = document.getElementById('mapCanvas') as HTMLCanvasElement
-                        if (mapCanvas) {
-                            mapCanvas.width = img.width
-                            mapCanvas.height = img.height
-                            const context = mapCanvas?.getContext('2d')
-                            if (context) {
-                                setMapContext(context)
-                                context.drawImage(img, 0, 0)
-                            }
-                            setMapCanvas(mapCanvas)
-                        }
-                        setMapImage(img)
-                    })
-                })
-        } else {
-            imageObjectURL.current = NoMap
+                .catch(() => {})
         }
     }, [mission.installationCode, mission.id, mission.map?.mapName])
 
@@ -133,14 +127,16 @@ export const MissionMapView = ({ mission }: MissionProps) => {
     }, [updateMap, mapContext])
 
     return (
-        <MapCard style={{ boxShadow: tokens.elevation.raised }}>
-            <Typography variant="h3">{displayedMapName}</Typography>
-            <SyledContainer>
-                <StyledElements>
-                    <StyledMap id="mapCanvas" />
-                    {imageObjectURL.current !== NoMap && mapContext && <MapCompass />}
-                </StyledElements>
-            </SyledContainer>
-        </MapCard>
+        <>
+            {displayMap && (
+                <MapCard style={{ boxShadow: tokens.elevation.raised }}>
+                    <Typography variant="h4">{displayedMapName}</Typography>
+                    <StyledElements>
+                        <StyledMap id="missionPageMapCanvas" />
+                        {mapContext && <MapCompass />}
+                    </StyledElements>
+                </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>