From 3396c6ec3ca046acbab7977a39b009b659df0a31 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 --- .../MapPosition/MissionMapView.tsx | 89 +++++++++---------- .../Pages/MissionPage/MissionPage.tsx | 31 +++++-- .../MissionPage/TaskOverview/TaskTable.tsx | 29 ++---- frontend/src/utils/DeckMapView.tsx | 17 ++-- 4 files changed, 82 insertions(+), 84 deletions(-) diff --git a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx index a7f341e8e..bb04bc594 100644 --- a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx +++ b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx @@ -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,10 +45,8 @@ 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 [displayMap, setDisplayMap] = useState(false) const updateMap = useCallback(() => { let context = mapCanvas.getContext('2d') @@ -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 @@ -80,29 +73,31 @@ 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 + let context = mapCanvas?.getContext('2d') + if (context) { + setMapContext(context) + context.drawImage(img, 0, 0) + } + setMapCanvas(mapCanvas) + setMapImage(img) + }) + } + BackendAPICaller.getMap(mission.installationCode!, mission.map?.mapName!) .then((imageBlob) => { - imageObjectURL.current = URL.createObjectURL(imageBlob) - }) - .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 - let context = mapCanvas?.getContext('2d') - if (context) { - setMapContext(context) - context.drawImage(img, 0, 0) - } - setMapCanvas(mapCanvas) - } - setMapImage(img) - }) + processImageURL(imageBlob) + setDisplayMap(true) }) + .catch(() => {}) }, [mission.installationCode, mission.id, mission.map?.mapName]) useEffect(() => { @@ -128,15 +123,19 @@ export const MissionMapView = ({ mission }: MissionProps) => { } }, [updateMap, mapContext]) + console.log(displayMap) + return ( - - {displayedMapName} - - - - {imageObjectURL.current !== NoMap && mapContext && } - - - + <> + {displayMap && ( + + {displayedMapName} + + + {mapContext && } + + + )} + ) } diff --git a/frontend/src/components/Pages/MissionPage/MissionPage.tsx b/frontend/src/components/Pages/MissionPage/MissionPage.tsx index 660ac1866..523504ada 100644 --- a/frontend/src/components/Pages/MissionPage/MissionPage.tsx +++ b/frontend/src/components/Pages/MissionPage/MissionPage.tsx @@ -17,18 +17,34 @@ import { AlertCategory } from 'components/Alerts/AlertsBanner' import { useMediaStreamContext } from 'components/Contexts/MediaStreamContext' import { tokens } from '@equinor/eds-tokens' import { StyledPage } from 'components/Styles/StyledComponents' +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-width: 50%; + max-width: fit-content; + min-height: 60%; + padding: 24px; + flex-direction: column; + justify-content: center; align-items: flex-start; - flex-wrap: wrap; - gap: 8rem; - padding-top: 16px; - padding-bottom: 16px; + 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; + align-items: top; + gap: 24px; + align-self: stretch; +` + export const VideoStreamSection = styled.div` display: grid; gap: 1rem; @@ -101,8 +117,11 @@ export const MissionPage = () => { <> - - + {TranslateText('Tasks')} + + + + {videoMediaStreams && videoMediaStreams.length > 0 && ( diff --git a/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx b/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx index 6123c2412..53f9e910e 100644 --- a/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx +++ b/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx @@ -5,44 +5,27 @@ 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' const StyledTable = styled(Table)` display: block; 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; -` export const TaskTable = ({ tasks }: { tasks: Task[] | undefined }) => { const { TranslateText } = useLanguageContext() return ( - - {TranslateText('Tasks')} - - # - {TranslateText('Tag-ID')} - {TranslateText('Description')} - {TranslateText('Inspection Types')} - {TranslateText('Status')} + # + {TranslateText('Tag-ID')} + {TranslateText('Description')} + {TranslateText('Inspection Types')} + {TranslateText('Status')} - {tasks && } + {tasks && } ) } diff --git a/frontend/src/utils/DeckMapView.tsx b/frontend/src/utils/DeckMapView.tsx index 71a54cd12..b07229a00 100644 --- a/frontend/src/utils/DeckMapView.tsx +++ b/frontend/src/utils/DeckMapView.tsx @@ -9,6 +9,8 @@ import { Pose } from 'models/Pose' import { MapCompass } from 'utils/MapCompass' import { Deck } from 'models/Deck' import { useLanguageContext } from 'components/Contexts/LanguageContext' +import { image } from '@equinor/eds-icons' +import { getMeta } from 'components/Pages/MissionPage/MapPosition/MissionMapView' interface DeckProps { deck: Deck @@ -62,13 +64,6 @@ export const DeckMapView = ({ deck, markedRobotPosition }: DeckProps) => { } }, [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) : ' ' @@ -137,9 +132,11 @@ export const DeckMapView = ({ deck, markedRobotPosition }: DeckProps) => { {mapMetadata && } - - {TranslateText('Map of {0}', [mapName])} - + {mapMetadata !== undefined && ( + + {TranslateText('Map of {0}', [mapName])} + + )} )}