Skip to content

Commit

Permalink
Improve mission page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrica-equinor
mrica-equinor committed Dec 5, 2024
1 parent 6dd8eda commit 3396c6e
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 84 deletions.
89 changes: 44 additions & 45 deletions frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,34 @@ 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 [displayMap, setDisplayMap] = useState<boolean>(false)

const updateMap = useCallback(() => {
let context = mapCanvas.getContext('2d')
Expand All @@ -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
Expand All @@ -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(() => {
Expand All @@ -128,15 +123,19 @@ export const MissionMapView = ({ mission }: MissionProps) => {
}
}, [updateMap, mapContext])

console.log(displayMap)

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>
)}
</>
)
}
31 changes: 25 additions & 6 deletions frontend/src/components/Pages/MissionPage/MissionPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -101,8 +117,11 @@ export const MissionPage = () => {
<>
<MissionHeader mission={selectedMission} />
<TaskAndMapSection>
<TaskTable tasks={selectedMission?.tasks} />
<MissionMapView mission={selectedMission} />
<Typography variant="h4">{TranslateText('Tasks')}</Typography>
<StyledTableAndMap>
<TaskTable tasks={selectedMission?.tasks} />
<MissionMapView mission={selectedMission} />
</StyledTableAndMap>
</TaskAndMapSection>
<VideoStreamSection>
{videoMediaStreams && videoMediaStreams.length > 0 && (
Expand Down
29 changes: 6 additions & 23 deletions frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<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.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>
<StyledTableBody>{tasks && <TaskTableRows tasks={tasks} />}</StyledTableBody>
<Table.Body>{tasks && <TaskTableRows tasks={tasks} />}</Table.Body>
</StyledTable>
)
}
Expand Down
17 changes: 7 additions & 10 deletions frontend/src/utils/DeckMapView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) : ' '

Expand Down Expand Up @@ -137,9 +132,11 @@ export const DeckMapView = ({ deck, markedRobotPosition }: DeckProps) => {
<StyledMap id="deckMapCanvas" />
{mapMetadata && <MapCompass />}
</StyledMapCompass>
<Typography italic variant="body_short">
{TranslateText('Map of {0}', [mapName])}
</Typography>
{mapMetadata !== undefined && (
<Typography italic variant="body_short">
{TranslateText('Map of {0}', [mapName])}
</Typography>
)}
</StyledCaption>
</StyledMapLimits>
)}
Expand Down

0 comments on commit 3396c6e

Please sign in to comment.