Skip to content

Commit

Permalink
Only fetch echo missions when scheduling missions
Browse files Browse the repository at this point in the history
  • Loading branch information
@Eddasol
Eddasol committed Mar 8, 2023
1 parent 323581b commit 7c16b0b
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 53 deletions.
62 changes: 34 additions & 28 deletions frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, Typography } from '@equinor/eds-core-react'
import { Button, Icon, Typography } from '@equinor/eds-core-react'
import styled from 'styled-components'
import { MissionQueueCard } from './MissionQueueCard'
import { useApi } from 'api/ApiCaller'
Expand All @@ -10,6 +10,8 @@ import { EchoMission } from 'models/EchoMission'
import { Robot } from 'models/Robot'
import { RefreshProps } from '../FrontPage'
import { Text } from 'components/Contexts/LanguageContext'
import { useAssetContext } from 'components/Contexts/AssetContext'
import { Icons } from 'utils/icons'

const StyledMissionView = styled.div`
display: grid;
Expand All @@ -25,7 +27,7 @@ const MissionTable = styled.div`

const MissionButtonView = styled.div`
display: flex;
gap: 2rem;
gap: 1rem;
`
const mapEchoMissionToString = (missions: EchoMission[]): Map<string, EchoMission> => {
var missionMap = new Map<string, EchoMission>()
Expand All @@ -52,8 +54,19 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
const [robotOptions, setRobotOptions] = useState<Map<string, Robot>>(new Map<string, Robot>())
const [scheduleButtonDisabled, setScheduleButtonDisabled] = useState<boolean>(true)
const [frontPageScheduleButtonDisabled, setFrontPageScheduleButtonDisabled] = useState<boolean>(true)
const [isFetchingEchoMissions, setIsFetchingEchoMissions] = useState<boolean>(false)
const { assetCode } = useAssetContext()
const echoURL = 'https://echo.equinor.com/mp?instCode='
const savedAsset = sessionStorage.getItem('assetString')

const fetchEchoMissions = () => {
setIsFetchingEchoMissions(true)
apiCaller.getEchoMissions(assetCode as string).then((missions) => {
const echoMissionsMap: Map<string, EchoMission> = mapEchoMissionToString(missions)
setEchoMissions(echoMissionsMap)
setIsFetchingEchoMissions(false)
})
}

const onSelectedEchoMissions = (selectedEchoMissions: string[]) => {
var echoMissionsToSchedule: EchoMission[] = []
selectedEchoMissions.map((selectedEchoMission: string) => {
Expand All @@ -70,7 +83,6 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
const onScheduleButtonPress = () => {
if (selectedRobot === undefined) return

const assetCode = sessionStorage.getItem('assetString')
selectedEchoMissions.map((mission: EchoMission) => {
apiCaller.postMission(mission.id, selectedRobot.id, assetCode)
})
Expand All @@ -89,21 +101,6 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
})
}, [])

useEffect(() => {
const id = setInterval(() => {
const installationCode = sessionStorage.getItem('assetString')
if (!installationCode || installationCode === '') {
setEchoMissions(new Map<string, EchoMission>())
} else {
apiCaller.getEchoMissions(installationCode as string).then((missions) => {
const mappedEchoMissions: Map<string, EchoMission> = mapEchoMissionToString(missions)
setEchoMissions(mappedEchoMissions)
})
}
}, refreshInterval)
return () => clearInterval(id)
}, [])

useEffect(() => {
const id = setInterval(() => {
apiCaller.getRobots().then((robots) => {
Expand Down Expand Up @@ -132,16 +129,28 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
}, [selectedRobot, selectedEchoMissions])

useEffect(() => {
if (Array.from(robotOptions.keys()).length === 0 || Array.from(echoMissions.keys()).length === 0) {
if (Array.from(robotOptions.keys()).length === 0 || assetCode === '') {
setFrontPageScheduleButtonDisabled(true)
} else {
setFrontPageScheduleButtonDisabled(false)
}
}, [robotOptions, echoMissions])
}, [robotOptions, assetCode])

var missionQueueDisplay = missionQueue.map(function (mission, index) {
return <MissionQueueCard key={index} mission={mission} onDeleteMission={onDeleteMission} />
})

const createMissionButton = (
<Button
onClick={() => {
window.open(echoURL + assetCode)
}}
>
<Icon name={Icons.ExternalLink} size={16}></Icon>
{Text('Create mission')}
</Button>
)

return (
<StyledMissionView>
<Typography variant="h1" color="resting">
Expand All @@ -158,16 +167,13 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
onSelectedMissions={onSelectedEchoMissions}
onSelectedRobot={onSelectedRobot}
onScheduleButtonPress={onScheduleButtonPress}
fetchEchoMissions={fetchEchoMissions}
scheduleButtonDisabled={scheduleButtonDisabled}
frontPageScheduleButtonDisabled={frontPageScheduleButtonDisabled}
isFetchingEchoMissions={isFetchingEchoMissions}
createMissionButton={createMissionButton}
></ScheduleMissionDialog>
<Button
onClick={() => {
window.open(echoURL + savedAsset)
}}
>
{Text('Create mission')}
</Button>
{createMissionButton}
</MissionButtonView>
</StyledMissionView>
)
Expand Down
110 changes: 85 additions & 25 deletions frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,25 @@ import {
Typography,
Popover,
Icon,
CircularProgress,
} from '@equinor/eds-core-react'
import { useRef, useState } from 'react'
import styled from 'styled-components'
import { Text } from 'components/Contexts/LanguageContext'
import { Icons } from 'utils/icons'
import { useRef, useState, useEffect } from 'react'
import { useAssetContext } from 'components/Contexts/AssetContext'

interface IProps {
robotOptions: Array<string>
echoMissionsOptions: Array<string>
onSelectedMissions: (missions: string[]) => void
onSelectedRobot: (robot: string) => void
onScheduleButtonPress: () => void
fetchEchoMissions: () => void
scheduleButtonDisabled: boolean
frontPageScheduleButtonDisabled: boolean
createMissionButton: JSX.Element
isFetchingEchoMissions: boolean
}

const StyledMissionDialog = styled.div`
Expand All @@ -34,15 +39,33 @@ const StyledAutoComplete = styled(Card)`
`

const StyledMissionSection = styled.div`
display: flex;
margin-left: auto;
margin-right: 0;
`

const StyledLoading = styled.div`
display: flex;
justify-content: center;
padding-top: 2rem;
`

export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false)
const [isScheduleMissionDialogOpen, setIsScheduleMissionDialogOpen] = useState<boolean>(false)
const [isEmptyEchoMissionsDialogOpen, setIsEmptyEchoMissionsDialogOpen] = useState<boolean>(false)
const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
const [isAssetValid, setIsAssetValid] = useState<boolean>(false)
const [isScheduleMissionsPressed, setIsScheduleMissionsPressed] = useState<boolean>(false)
const anchorRef = useRef<HTMLButtonElement>(null)
const { assetCode } = useAssetContext()

useEffect(() => {
if (!props.isFetchingEchoMissions && isScheduleMissionsPressed) {
if (props.echoMissionsOptions.length === 0) setIsEmptyEchoMissionsDialogOpen(true)
else setIsScheduleMissionDialogOpen(true)
setIsScheduleMissionsPressed(false)
}
}, [props.isFetchingEchoMissions])

let timer: ReturnType<typeof setTimeout>
const openPopover = () => {
if (props.frontPageScheduleButtonDisabled) setIsPopoverOpen(true)
Expand All @@ -54,63 +77,100 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
timer = setTimeout(() => {
openPopover()
}, 300)

if (sessionStorage.getItem('assetString')) setIsAssetValid(true)
else setIsAssetValid(false)
}

const handleClose = () => {
clearTimeout(timer)
closePopover()
}

const onClickScheduleMission = () => {
setIsScheduleMissionsPressed(true)
props.fetchEchoMissions()
}

const onChangeEchoMissionSelections = (changes: AutocompleteChanges<string>) => {
props.onSelectedMissions(changes.selectedItems)
}
const onChangeRobotSelection = (changes: AutocompleteChanges<string>) => {
props.onSelectedRobot(changes.selectedItems[0])
}

return (
<>
<div onPointerEnter={handleHover} onPointerLeave={handleClose} onFocus={openPopover} onBlur={handleClose}>
<Button
onClick={() => {
setIsDialogOpen(true)
onClickScheduleMission()
}}
disabled={props.frontPageScheduleButtonDisabled}
ref={anchorRef}
>
<Icon name={Icons.Add} size={16} />
{Text('Add mission')}
<>
<Icon name={Icons.Add} size={16} />
{Text('Add mission')}
</>
</Button>
</div>

<Popover
anchorEl={anchorRef.current}
onClose={handleClose}
open={isPopoverOpen && !isAssetValid}
open={isPopoverOpen && assetCode === ''}
placement="top"
>
<Popover.Content>
<Typography variant="body_short">{Text('Please select asset')}</Typography>
</Popover.Content>
</Popover>

<Popover
anchorEl={anchorRef.current}
onClose={handleClose}
open={isPopoverOpen && isAssetValid}
placement="top"
>
<Popover.Content>
<Typography variant="body_short">
{Text('This asset has no missions - Please create mission')}
</Typography>
</Popover.Content>
</Popover>
<StyledMissionDialog>
<Dialog open={props.isFetchingEchoMissions && isScheduleMissionsPressed} isDismissable>
<StyledAutoComplete>
<StyledLoading>
<CircularProgress />
</StyledLoading>
<StyledMissionSection>
<Button
onClick={() => {
setIsScheduleMissionsPressed(false)
}}
variant="outlined"
color="secondary"
>
{' '}
{Text('Cancel')}{' '}
</Button>
</StyledMissionSection>
</StyledAutoComplete>
</Dialog>
</StyledMissionDialog>

<StyledMissionDialog>
<Dialog open={isEmptyEchoMissionsDialogOpen} isDismissable>
<StyledAutoComplete>
<Typography variant="h5">
{Text('This asset has no missions - Please create mission')}
</Typography>
<StyledMissionSection>
{props.createMissionButton}
<Button
onClick={() => {
setIsEmptyEchoMissionsDialogOpen(false)
}}
variant="outlined"
color="secondary"
>
{' '}
{Text('Cancel')}{' '}
</Button>
</StyledMissionSection>
</StyledAutoComplete>
</Dialog>
</StyledMissionDialog>

<StyledMissionDialog>
<Dialog open={isDialogOpen} isDismissable>
<Dialog open={isScheduleMissionDialogOpen} isDismissable>
<StyledAutoComplete>
<Typography variant="h5">{Text('Add mission')}</Typography>
<Autocomplete
Expand All @@ -127,7 +187,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
<StyledMissionSection>
<Button
onClick={() => {
setIsDialogOpen(false)
setIsScheduleMissionDialogOpen(false)
}}
variant="outlined"
color="secondary"
Expand All @@ -138,7 +198,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
<Button
onClick={() => {
props.onScheduleButtonPress()
setIsDialogOpen(false)
setIsScheduleMissionDialogOpen(false)
}}
disabled={props.scheduleButtonDisabled}
>
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/utils/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
arrow_back,
add,
history,
external_link,
} from '@equinor/eds-icons'

Icon.add({
Expand Down Expand Up @@ -57,6 +58,7 @@ Icon.add({
arrow_back,
add,
history,
external_link,
})

export enum Icons {
Expand Down Expand Up @@ -87,4 +89,5 @@ export enum Icons {
ArrowBack = 'arrow_back',
Add = 'add',
Historic = 'history',
ExternalLink = 'external_link',
}

0 comments on commit 7c16b0b

Please sign in to comment.