From 3e73ddcd89573574fc9d98a0366bcb4e94ce600a Mon Sep 17 00:00:00 2001 From: "Mariana R. Santos" Date: Thu, 5 Dec 2024 09:38:47 +0100 Subject: [PATCH] Improve mission page --- .../MissionButtons/MissionRestartButton.tsx | 1 + frontend/src/components/Header/Header.tsx | 1 + .../components/Pages/FrontPage/FrontPage.tsx | 5 +- .../MapPosition/MissionMapView.tsx | 37 ++++------ .../MissionHeader/MissionHeader.tsx | 53 ++++++++------ .../Pages/MissionPage/MissionPage.tsx | 71 ++++++++++++++----- .../MissionPage/TaskOverview/TaskTable.tsx | 42 ++++------- .../components/Styles/StyledComponents.tsx | 3 - frontend/src/utils/InspectionAreaMapView.tsx | 16 ++--- 9 files changed, 123 insertions(+), 106 deletions(-) diff --git a/frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx b/frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx index e9bff020f..cce219660 100644 --- 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 index de3d61ad4..32e6c8fdc 100644 --- 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 index 4312ec1cb..1fba7bb79 100644 --- 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 index 624eed531..c66277e13 100644 --- 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,23 +19,25 @@ 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() @@ -43,9 +45,7 @@ export const MissionMapView = ({ mission }: MissionProps) => { const [mapImage, setMapImage] = useState(document.createElement('img')) const [mapContext, setMapContext] = useState() const [currentTaskOrder, setCurrentTaskOrder] = useState(0) - const missionRobot = enabledRobots.find((robot) => robot.id === mission.robot.id) - const imageObjectURL = useRef('') 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 ( - - {displayedMapName} - + <> + + {displayedMapName} - + {imageObjectURL.current !== NoMap && mapContext && } - - + + ) } diff --git a/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx b/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx index 9a133efc6..4fd73abd4 100644 --- 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 ( @@ -186,23 +199,17 @@ export const MissionHeader = ({ mission }: { mission: Mission }) => { - - + +
{HeaderText(translatedStatus, '')}
{HeaderText(translatedTasks, `${numberOfCompletedTasks + '/' + mission.tasks.length}`)} - - {HeaderText(translatedStartDate, `${startDate}`)} {HeaderText(translatedStartTime, `${startTime}`)} - - {HeaderText(translatedUsedTime, `${usedTime}`)} {!isMissionCompleted && HeaderText(translatedEstimatedTimeRemaining, `${remainingTime}`)} - - {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` )} - - + + ) } diff --git a/frontend/src/components/Pages/MissionPage/MissionPage.tsx b/frontend/src/components/Pages/MissionPage/MissionPage.tsx index 6da1f1f6a..3ec990f6d 100644 --- 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,6 +122,8 @@ export const MissionPage = () => { }) }, [missionId]) + console.log(selectedMission) + return ( <>
@@ -99,20 +131,27 @@ export const MissionPage = () => { {selectedMission !== undefined && ( <> - - - - - - - {videoMediaStreams && videoMediaStreams.length > 0 && ( - + + + + + {TranslateText('Tasks')} + + + {selectedMission.map?.mapName && } + + + + + {videoMediaStreams && videoMediaStreams.length > 0 && ( + + )} + + {selectedInspectionTask && selectedInspectionTask.isarTaskId && ( + )} - - {selectedInspectionTask && selectedInspectionTask.isarTaskId && ( - - )} - + + )} diff --git a/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx b/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx index f2106a3c4..b905e7327 100644 --- 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 ( - <> - - - {TranslateText('Tasks')} - - - - # - {TranslateText('Tag-ID')} - {TranslateText('Description')} - {TranslateText('Inspection Types')} - {TranslateText('Status')} - - - {tasks && } - - + + + + # + {TranslateText('Tag-ID')} + {TranslateText('Description')} + {TranslateText('Inspection Types')} + {TranslateText('Status')} + + + {tasks && } + ) } diff --git a/frontend/src/components/Styles/StyledComponents.tsx b/frontend/src/components/Styles/StyledComponents.tsx index ce9ef4511..7db11d354 100644 --- 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}; -` diff --git a/frontend/src/utils/InspectionAreaMapView.tsx b/frontend/src/utils/InspectionAreaMapView.tsx index 176ea8a7b..c1fa25c7c 100644 --- a/frontend/src/utils/InspectionAreaMapView.tsx +++ b/frontend/src/utils/InspectionAreaMapView.tsx @@ -9,6 +9,7 @@ import { Pose } from 'models/Pose' import { MapCompass } from 'utils/MapCompass' import { InspectionArea } from 'models/InspectionArea' import { useLanguageContext } from 'components/Contexts/LanguageContext' +import { getMeta } from 'components/Pages/MissionPage/MapPosition/MissionMapView' interface InspectionAreaProps { inspectionArea: InspectionArea @@ -62,13 +63,6 @@ export const InspectionAreaMapView = ({ inspectionArea, markedRobotPosition }: I } }, [mapCanvas, mapImage, mapMetadata, markedRobotPosition]) - const getMeta = async (url: string) => { - const image = new Image() - image.src = url - await image.decode() - return image - } - let mapName = mapMetadata?.mapName.split('.')[0].replace(/[^0-9a-z-A-Z ]/g, ' ') mapName = mapName ? mapName.charAt(0).toUpperCase() + mapName.slice(1) : ' ' @@ -136,9 +130,11 @@ export const InspectionAreaMapView = ({ inspectionArea, markedRobotPosition }: I {mapMetadata && } - - {TranslateText('Map of {0}', [mapName])} - + {mapMetadata !== undefined && ( + + {TranslateText('Map of {0}', [mapName])} + + )} )}