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

Refactor ongoing mission page for iphone use #1328

Merged
merged 1 commit into from
Jan 12, 2024
Merged

Refactor ongoing mission page for iphone use #1328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
152 changes: 106 additions & 46 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 @@ -11,20 +11,19 @@ import { MissionRestartButton } from 'components/Displays/MissionButtons/Mission
import { TaskStatus } from 'models/Task'

const HeaderSection = styled(Card)`
width: 100%;
min-width: 600px;
height: auto;
display: flex;
width: 85vw;
padding: 15px 0px 15px 0px;
box-shadow: none;
border-radius: 0px;
max-width: 800px;
top: 60px;
flex-direction: column;
gap: 10px;
position: sticky;
padding: 15px 0px 15px 0px;
background-color: white;
z-index: 1;
box-shadow: none;
border-bottom: 1px solid ${tokens.colors.interactive.disabled__border.hex};
border-radius: 0px;

@media (max-width: 500px) {
top: 80px;
}
`
const TitleSection = styled.div`
display: flex;
Expand All @@ -33,16 +32,50 @@ const TitleSection = styled.div`
`
const InfoSection = styled.div`
display: flex;
align-content: start;
align-items: flex-end;
gap: 1.2rem;
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__light.hex};
gap: 24px;
align-items: stretch;
`

const StyledTitleText = styled.div`
display: grid;
grid-direction: column;
gap: 5px;
`

const StyledTypography = styled(Typography)`
font-family: Equinor;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 40px; /* 125% */

@media (max-width: 500px) {
font-family: Equinor;
font-size: 24px;
font-style: normal;
}
`

const HeaderText = (text: string) => {
const HeaderText = (title: string, text: string) => {
return (
<Typography variant="body_short" group="paragraph" color={tokens.colors.text.static_icons__secondary.hex}>
{text}
</Typography>
<StyledTitleText>
<Typography variant="meta" color={tokens.colors.text.static_icons__secondary.hex}>
{title}
</Typography>
<Typography variant="caption" color={tokens.colors.text.static_icons__secondary.hex}>
{text}
</Typography>
</StyledTitleText>
)
}

Expand Down Expand Up @@ -107,6 +140,9 @@ export const MissionHeader = ({ mission }: { mission: Mission }) => {
const translatedBatteryLevel = TranslateText('Battery level')
const translatedPressureLevel = TranslateText('Pressure level')
const translatedDescription = TranslateText('Description')
const translatedArea = TranslateText('Area')
const translatedTasks = TranslateText('Completed Tasks')
const translatedStatus = TranslateText('Status')

const { startTime, startDate, usedTime, remainingTime } = getStartUsedAndRemainingTime(mission)
const isMissionActive = mission.status === MissionStatus.Ongoing || mission.status === MissionStatus.Paused
Expand All @@ -115,37 +151,61 @@ export const MissionHeader = ({ mission }: { mission: Mission }) => {
(t) => t.status !== TaskStatus.PartiallySuccessful && t.status !== TaskStatus.Successful
)

const numberOfCompletedTasks = mission.tasks.filter((task) => task.isCompleted).length

return (
<HeaderSection>
<TitleSection>
<Typography variant="h1">{mission.name}</Typography>
{isMissionActive && (
<MissionControlButtons
missionName={mission.name}
robotId={mission.robot.id}
missionStatus={mission.status}
/>
)}
{mission.endTime && <MissionRestartButton mission={mission} hasFailedTasks={missionHasFailedTasks} />}
</TitleSection>
<Typography variant="body_long" group="paragraph" color={tokens.colors.text.static_icons__secondary.hex}>
{mission.description && `${translatedDescription}: ${mission.description}`}
</Typography>
<StatusReason statusReason={mission.statusReason} status={mission.status}></StatusReason>
<InfoSection>
<MissionStatusDisplay status={mission.status} />
{HeaderText(`${translatedStartDate}: ${startDate}`)}
{HeaderText(`${translatedStartTime}: ${startTime}`)}
{HeaderText(`${translatedUsedTime}: ${usedTime}`)}
{!isMissionCompleted && HeaderText(`${translatedEstimatedTimeRemaining}: ${remainingTime}`)}
{HeaderText(`${translatedRobot}: ${mission.robot.name}`)}
{!isMissionCompleted && HeaderText(`${translatedBatteryLevel}: ${mission.robot.batteryLevel}%`)}
{!isMissionCompleted &&
mission.robot.pressureLevel &&
HeaderText(
`${translatedPressureLevel}: ${Math.round(mission.robot.pressureLevel * barToMillibar)}mBar`
<>
<HeaderSection>
<TitleSection>
<StyledTypography>{mission.name}</StyledTypography>
mrica-equinor marked this conversation as resolved.
Show resolved Hide resolved
{isMissionActive && (
<MissionControlButtons
missionName={mission.name}
robotId={mission.robot.id}
missionStatus={mission.status}
/>
)}
{mission.endTime && (
<MissionRestartButton mission={mission} hasFailedTasks={missionHasFailedTasks} />
)}
</TitleSection>
<Typography
variant="body_long"
group="paragraph"
color={tokens.colors.text.static_icons__secondary.hex}
>
{mission.description && `${translatedDescription}: ${mission.description}`}
</Typography>
<StatusReason statusReason={mission.statusReason} status={mission.status}></StatusReason>
</HeaderSection>
<InfoSection>
<StyledCard>
<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, `${mission.robot.batteryLevel}%`)}
{!isMissionCompleted &&
mission.robot.pressureLevel &&
HeaderText(
translatedPressureLevel,
`${Math.round(mission.robot.pressureLevel * barToMillibar)}mBar`
)}
Comment on lines +200 to +206
Copy link
Contributor

Choose a reason for hiding this comment

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

Alignment is off on completed missions
image

</StyledCard>
</InfoSection>
</HeaderSection>
</>
)
}
23 changes: 20 additions & 3 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 @@ -7,16 +7,33 @@ import { tokens } from '@equinor/eds-tokens'
import { getColorsFromTaskStatus } from 'utils/MarkerStyles'

const StyledTable = styled(Table)`
grid-column: 1/ -1;
font: equinor;
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-family: Equinor;
font-size: 24px;
font-style: normal;
line-height: 30px;
}

padding-bottom: 10px;
`

export const TaskTable = ({ tasks }: { tasks: Task[] | undefined }) => {
const { TranslateText } = useLanguageContext()
return (
<StyledTable>
<Table.Caption>
<Typography variant="h2">{TranslateText('Tasks')}</Typography>
<StyledTypography variant="h2">{TranslateText('Tasks')}</StyledTypography>
</Table.Caption>
<Table.Head>
<Table.Row>
Expand Down
Loading