From 7c16b0bca7cf0f6c31dbdb87eba4994234f2203c Mon Sep 17 00:00:00 2001 From: Eddasol Date: Wed, 8 Mar 2023 09:41:21 +0100 Subject: [PATCH] Only fetch echo missions when scheduling missions --- .../MissionOverview/MissionQueueView.tsx | 62 +++++----- .../MissionOverview/ScheduleMissionDialog.tsx | 110 ++++++++++++++---- frontend/src/utils/icons.tsx | 3 + 3 files changed, 122 insertions(+), 53 deletions(-) diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx index 07dd9014d..60d10166f 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx @@ -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' @@ -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; @@ -25,7 +27,7 @@ const MissionTable = styled.div` const MissionButtonView = styled.div` display: flex; - gap: 2rem; + gap: 1rem; ` const mapEchoMissionToString = (missions: EchoMission[]): Map => { var missionMap = new Map() @@ -52,8 +54,19 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) { const [robotOptions, setRobotOptions] = useState>(new Map()) const [scheduleButtonDisabled, setScheduleButtonDisabled] = useState(true) const [frontPageScheduleButtonDisabled, setFrontPageScheduleButtonDisabled] = useState(true) + const [isFetchingEchoMissions, setIsFetchingEchoMissions] = useState(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 = mapEchoMissionToString(missions) + setEchoMissions(echoMissionsMap) + setIsFetchingEchoMissions(false) + }) + } + const onSelectedEchoMissions = (selectedEchoMissions: string[]) => { var echoMissionsToSchedule: EchoMission[] = [] selectedEchoMissions.map((selectedEchoMission: string) => { @@ -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) }) @@ -89,21 +101,6 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) { }) }, []) - useEffect(() => { - const id = setInterval(() => { - const installationCode = sessionStorage.getItem('assetString') - if (!installationCode || installationCode === '') { - setEchoMissions(new Map()) - } else { - apiCaller.getEchoMissions(installationCode as string).then((missions) => { - const mappedEchoMissions: Map = mapEchoMissionToString(missions) - setEchoMissions(mappedEchoMissions) - }) - } - }, refreshInterval) - return () => clearInterval(id) - }, []) - useEffect(() => { const id = setInterval(() => { apiCaller.getRobots().then((robots) => { @@ -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 }) + + const createMissionButton = ( + + ) + return ( @@ -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} > - + {createMissionButton} ) diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx index c6e4789a7..1f9cc3af9 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog.tsx @@ -7,11 +7,13 @@ 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 @@ -19,8 +21,11 @@ interface IProps { 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` @@ -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(false) + const [isScheduleMissionDialogOpen, setIsScheduleMissionDialogOpen] = useState(false) + const [isEmptyEchoMissionsDialogOpen, setIsEmptyEchoMissionsDialogOpen] = useState(false) const [isPopoverOpen, setIsPopoverOpen] = useState(false) - const [isAssetValid, setIsAssetValid] = useState(false) + const [isScheduleMissionsPressed, setIsScheduleMissionsPressed] = useState(false) const anchorRef = useRef(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 const openPopover = () => { if (props.frontPageScheduleButtonDisabled) setIsPopoverOpen(true) @@ -54,9 +77,6 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { timer = setTimeout(() => { openPopover() }, 300) - - if (sessionStorage.getItem('assetString')) setIsAssetValid(true) - else setIsAssetValid(false) } const handleClose = () => { @@ -64,31 +84,39 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { closePopover() } + const onClickScheduleMission = () => { + setIsScheduleMissionsPressed(true) + props.fetchEchoMissions() + } + const onChangeEchoMissionSelections = (changes: AutocompleteChanges) => { props.onSelectedMissions(changes.selectedItems) } const onChangeRobotSelection = (changes: AutocompleteChanges) => { props.onSelectedRobot(changes.selectedItems[0]) } + return ( <>
@@ -96,21 +124,53 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => { - - - - {Text('This asset has no missions - Please create mission')} - - - + + + + + + + + + + + + + + + + + + {Text('This asset has no missions - Please create mission')} + + + {props.createMissionButton} + + + + + - + {Text('Add mission')} {