Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve mission page #1848

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Improve mission page #1848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7cfec36
Improve mission page
mrica-equinor Dec 5, 2024
f8835e4
Improve mission page info section
mrica-equinor Dec 5, 2024
0cc5a37
Fix white front page
mrica-equinor Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const Centered = styled.div`
`
const StyledButton = styled(Button)`
background-color: none;
height: fit-content;
`

interface MissionProps {
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/Pages/FrontPage/FrontPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
90 changes: 43 additions & 47 deletions frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
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'
Expand All @@ -19,34 +18,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 +60,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 +72,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 @@ -129,14 +123,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>
)}
</>
)
}
52 changes: 29 additions & 23 deletions frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ 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`
Comment on lines +21 to 23
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggest putting the "Add to queue"-button under the title on smal screen (maybe flex: wrap?)
image

display: flex;
Expand All @@ -28,17 +28,15 @@ const TitleSection = styled.div`
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;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image Should info section be same width as rest? Also it doesn't seem centered with regards to height

`
const StyledTitleText = styled.div`
display: grid;
Expand All @@ -51,12 +49,25 @@ 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: 24px 10px 10px 10px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
border-radius: 6px;
border: 1px solid ${tokens.colors.ui.background__medium.rgba};
background: ${tokens.colors.ui.background__default.rgba};
max-width: fit-content;
`

const HeaderText = (title: string, text: string) => {
return (
<StyledTitleText>
Expand Down Expand Up @@ -186,23 +197,18 @@ 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(translatedArea, `${mission.area?.areaName}`)}
{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 &&
Expand All @@ -212,8 +218,8 @@ export const MissionHeader = ({ mission }: { mission: Mission }) => {
translatedPressureLevel,
`${Math.round(mission.robot.pressureLevel * barToMillibar)}mBar`
)}
</StyledCard>
</InfoSection>
</InfoSection>
</StyledMissionHeader>
</>
)
}
32 changes: 27 additions & 5 deletions frontend/src/components/Pages/MissionPage/MissionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,37 @@ 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-width: 50%;
max-width: fit-content;
min-height: 60%;
Comment on lines +29 to +31
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These values feel a bit arbitrary. Are they necessary?

Look at ContainButton for missionHistoryButton for inspiration

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;
`

export const VideoStreamSection = styled.div`
display: grid;
gap: 1rem;
Expand Down Expand Up @@ -104,8 +123,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
30 changes: 12 additions & 18 deletions frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -35,23 +34,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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using different design for task table on small screen
image

<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>
)
}

Expand Down
3 changes: 0 additions & 3 deletions frontend/src/components/Styles/StyledComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
`
Loading
Loading