Select robot when scheduling missions

frontend/src/api/ApiCaller.tsx

@@ -115,10 +115,10 @@ export class BackendAPICaller {
         })
         return result.body
     }
-    async postMission(echoMissionId: number, startTime: Date) {
+    async postMission(echoMissionId: number, robotId: string, startTime: Date) {
         const path: string = 'missions'
         const robots: Robot[] = await this.getRobots()
-        const desiredRobot = filterRobots(robots, 'R2-D2')
+        const desiredRobot = filterRobots(robots, robotId)
         const body = { robotId: desiredRobot[0].id, echoMissionId: echoMissionId, startTime: startTime }
         const result = await this.POST<unknown>(path, body).catch((e) => {
             throw new Error(`Failed to POST /${path}: ` + e)

frontend/src/components/MissionOverview/ScheduleMissionDialog.tsx

@@ -4,9 +4,12 @@ import { useState } from 'react'
 import styled from 'styled-components'
 
 interface IProps {
-    options: Array<string>
+    robotOptions: Array<string>
+    echoMissionsOptions: Array<string>
     onSelectedMissions: (missions: string[]) => void
+    onSelectedRobot: (robot: string) => void
     onScheduleButtonPress: () => void
+    scheduleButtonDisabled: boolean
 }
 
 const StyledMissionDialog = styled.div`
@@ -26,9 +29,12 @@ const StyledMissionSection = styled.div`
 
 export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
     const [isOpen, setIsOpen] = useState<boolean>(false)
-    const onChange = (changes: AutocompleteChanges<string>) => {
+    const onChangeEchoMissionSelections = (changes: AutocompleteChanges<string>) => {
         props.onSelectedMissions(changes.selectedItems)
     }
+    const onChangeRobotSelection = (changes: AutocompleteChanges<string>) => {
+        props.onSelectedRobot(changes.selectedItems[0])
+    }
     return (
         <>
             <Button
@@ -43,11 +49,16 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
                     <StyledAutoComplete>
                         <Typography variant="h5">Schedule mission</Typography>
                         <Autocomplete
-                            options={props.options}
+                            options={props.echoMissionsOptions}
                             label={'Schedule Missions'}
-                            onOptionsChange={onChange}
+                            onOptionsChange={onChangeEchoMissionSelections}
                             multiple
                         />
+                        <Autocomplete
+                            options={props.robotOptions}
+                            label={'Select robot'}
+                            onOptionsChange={onChangeRobotSelection}
+                        />
                         <StyledMissionSection>
                             <Button
                                 onClick={() => {
@@ -64,6 +75,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
                                     props.onScheduleButtonPress()
                                     setIsOpen(false)
                                 }}
+                                disabled={props.scheduleButtonDisabled}
                             >
                                 {' '}
                                 Schedule mission

frontend/src/components/MissionOverview/UpcomingMissionView.tsx

@@ -7,6 +7,7 @@ import { Mission, MissionStatus } from 'models/Mission'
 import { NoUpcomingMissionsPlaceholder } from './NoMissionPlaceholder'
 import { ScheduleMissionDialog } from './ScheduleMissionDialog'
 import { EchoMission } from 'models/EchoMission'
+import { Robot } from 'models/Robot'
 
 const StyledMissionView = styled.div`
     display: grid;
@@ -32,12 +33,23 @@ const mapEchoMissionToString = (missions: EchoMission[]): Map<string, EchoMissio
     return missionMap
 }
 
+const mapRobotsToString = (robots: Robot[]): Map<string, Robot> => {
+    var robotMap = new Map<string, Robot>()
+    robots.map((robot: Robot) => {
+        robotMap.set(robot.name + ' id: ' + robot.id, robot)
+    })
+    return robotMap
+}
+
 export function UpcomingMissionView() {
     const apiCaller = useApi()
     const [upcomingMissions, setUpcomingMissions] = useState<Mission[]>([])
-    const [selectedEchoMission, setSelectedEchoMissions] = useState<EchoMission[]>([])
+    const [selectedEchoMissions, setSelectedEchoMissions] = useState<EchoMission[]>([])
+    const [selectedRobot, setSelectedRobot] = useState<Robot>()
     const [echoMissions, setEchoMissions] = useState<Map<string, EchoMission>>()
+    const [robotOptions, setRobotOptions] = useState<Map<string, Robot>>()
     const [assetString, setAssetString] = useState<string>('')
+    const [scheduleButtonDisabled, setScheduleButtonDisabled] = useState<boolean>(true)
 
     const onSelectedEchoMissions = (selectedEchoMissions: string[]) => {
         var echoMissionsToSchedule: EchoMission[] = []
@@ -46,9 +58,18 @@ export function UpcomingMissionView() {
         })
         setSelectedEchoMissions(echoMissionsToSchedule)
     }
+    const onSelectedRobot = (selectedRobot: string) => {
+        if (robotOptions === undefined) return
+
+        setSelectedRobot(robotOptions.get(selectedRobot) as Robot)
+    }
+
     const onScheduleButtonPress = () => {
-        selectedEchoMission.map((mission: EchoMission) => {
-            apiCaller.postMission(mission.id, new Date())
+        if (selectedRobot === undefined) return
+
+        selectedEchoMissions.map((mission: EchoMission) => {
+            console.log(`Schedule Echo missions ${mission.id}: ${mission.name} to robot ${selectedRobot.name}`)
+            apiCaller.postMission(mission.id, selectedRobot.id, new Date())
         })
     }
     useEffect(() => {
@@ -74,6 +95,16 @@ export function UpcomingMissionView() {
         return () => clearInterval(id)
     }, [])
 
+    useEffect(() => {
+        const id = setInterval(() => {
+            apiCaller.getRobots().then((robots) => {
+                const mappedRobots: Map<string, Robot> = mapRobotsToString(robots)
+                setRobotOptions(mappedRobots)
+            })
+        }, 1000)
+        return () => clearInterval(id)
+    }, [])
+
     useEffect(() => {
         const id = setInterval(() => {
             apiCaller.getMissionsByStatus(MissionStatus.Pending).then((missions) => {
@@ -83,6 +114,14 @@ export function UpcomingMissionView() {
         return () => clearInterval(id)
     }, [])
 
+    useEffect(() => {
+        if (selectedRobot === undefined || selectedEchoMissions.length === 0) {
+            setScheduleButtonDisabled(true)
+        } else {
+            setScheduleButtonDisabled(false)
+        }
+    }, [selectedRobot, selectedEchoMissions])
+
     var upcomingMissionDisplay = upcomingMissions.map(function (mission, index) {
         return <UpcomingMissionCard key={index} mission={mission} />
     })
@@ -96,12 +135,15 @@ export function UpcomingMissionView() {
                 {upcomingMissions.length === 0 && <NoUpcomingMissionsPlaceholder />}
             </MissionTable>
             <MissionButtonView>
-                {echoMissions && (
+                {echoMissions && robotOptions && (
                     <>
                         <ScheduleMissionDialog
-                            options={Array.from(echoMissions.keys())}
+                            robotOptions={Array.from(robotOptions.keys())}
+                            echoMissionsOptions={Array.from(echoMissions.keys())}
                             onSelectedMissions={onSelectedEchoMissions}
+                            onSelectedRobot={onSelectedRobot}
                             onScheduleButtonPress={onScheduleButtonPress}
+                            scheduleButtonDisabled={scheduleButtonDisabled}
                         ></ScheduleMissionDialog>
                         <Button>Make new mission in Echo</Button>
                     </>

frontend/src/utils/scheduleMission.tsx

@@ -1,6 +1,6 @@
 import { Robot } from 'models/Robot'
 
-export const filterRobots = (robots: Robot[], name: string): Robot[] => {
-    const desiredRobot = robots.filter((robot: Robot) => robot.name === name)
+export const filterRobots = (robots: Robot[], id: string): Robot[] => {
+    const desiredRobot = robots.filter((robot: Robot) => robot.id === id)
     return desiredRobot
 }